virtual DOM和diff算法（一）

哈喽，大家好，今天是周一。周末回老家了，每次回老家后的第一个工作日都感觉很陌生，各位宝宝(づ｡◕‿‿◕｡)づ，有多久没回老家了？不管在哪里，记得好好照顾自己，好好爱自己！

speak is cheap

virtual DOM因react的流行而被人们重视，在没有virtual DOM的时候，我们都是操作dom节点来进行页面的渲染和修改的，相比于频繁操作dom，virtual DOM很好的将dom进行了一层映射，将原本需要在真实dom进行的创建节点、删除节点、添加节点等一系列复杂的dom操作完全放到virtual DOM中进行。所以说virtual DOM实际是存储了dom的重要信息的js。

vitual DOM

virtual DOM因react而流行，所以下面以react为例子，我们来看看virtual DOM。在一篇外文中看到一个很好的解释，翻译如下：

When a React UI is rendered, it is first rendered into a virtual DOM, which is not an actual DOM object graph, but a light-weight, pure JavaScript data structure of plain objects and arrays that represents a real DOM object graph. A separate process then takes that virtual DOM structure and creates the corresponding real DOM elements that are shown on the screen.

翻译：呈现react ui时，首先渲染成virtual DOM，这个virtaul DOM不是真实的DOM节点，而是一个轻量的、纯javascript数据结构的普通对象或者数组，代表真实的DOM对象图。之后通过一个单独的过程把virtual DOM创造成相应的真实DOM元素展示在屏幕上。

Then, when a change occurs, a new virtual DOM is created from scratch. That new virtual DOM will reflect the new state of the data model. React now has twovirtual DOM data structures at hand: The new one and the old one. It then runs a diffing algorithm on the two virtual DOMs, to get the set of changes between them. Those changes, and only those changes, are applied to the real DOM: This element was added, this attribute's value changed, etc.

翻译： 当改变发生时，从头开始创建一个新的virtual DOM。这个新的virtual DOM反应了新的数据模型的状态。这时react有新旧两个virtual DOM。然后运行diff算法在两个virtual DOM，来获取两个之间的变化。这些改变应用到真的DOM元素：添加了这个元素，改变属性值，等等。

So the big benefit of React, or at least one of them, is that you don't need to track change. You just re-render the whole UI every time and whatever changed will be in the new result. The virtual DOM diffing approach lets you do that while still minimizing the amount of expensive DOM operations.

翻译：所以react最大的优点就是你不必跟踪变化，只需要每次都重新渲染整个UI，并且任何改变都会重新生成。virtual DOM差异化可以帮助你实现，并且最大限度的减少昂贵的DOM操作。

通过difff算法得到需要修改的最小单位，再将最小单位的视图进行更新。这样就减少了很多不需要的DOM操作。今天就说这么多，明天更新关于diff算法的学习笔记，敬请期待~

愿我们有能力不向生活缴械投降---Lin

参考文献：

http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html