虚拟DOM diff算法（学者说）

虚拟Dom和diff算法

虚拟Dom的概念：

虚拟DOM的本质就是一个JS对象，虚拟DOM减少了真实DOM的操作，当修改数据的时候，就是修改虚拟DOM产生全新的虚拟DOM

新旧虚拟DOM使用diff算法，得到patch(也就是需要修改的部分)，然后将这个patch打到浏览器的DOM上
（减少重绘和回流，从而达到性能优化的目的）

每次DOM操作会引起重绘或者回流，频繁的真实DOM的修改会触发多次的排版和重绘相当耗性能

优点：

• 虚拟DOM提高性能，减少操作DOM的次数，减少回流和重绘
• 虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用diff 算法避免了没有必要的 dom 操作，从而提高性能

流程：

1.用 JavaScript 对象结构表示 DOM 树的结构；

2.然后用这个树构建一个真正的 DOM 树，插到文档当中

3.当状态变更的时候，重新构造一棵新的对象树

4.然后用新的树和旧的树进行比较，记录两棵树差异

5.把所记录的差异应用到步骤 2所构建的真正的 DOM 树上，视图就更新了

使用diff算法比较新旧虚拟DOM----即比较两个js对象不怎么耗性能，而比较两个真实的DOM比较耗性能，从而虚拟DOM极大的提升了性能

diff算法的概念：

diff算法指的就是两个虚拟DOM作比对，在diff算法中有个概念就是同级比对，首先比对顶层虚拟DOM节点是否一致，如果一样就接着比对下一层，如果不一样，就停止向下比对，将原始页面中这个DOM及 下面的DOM全部删除掉，重新生成新的虚拟DOM，然后替换掉原始页面的DOM
存在问题：

• 如果第一层虚拟DOM节点不同，下面的都同，使用虚拟DOM的diff算法，则这些节点都不能使用了，会造成重新渲染的浪费。

优点：

• 同层虚拟DOM比对，只需要一层层的比较，算法简单，比对的速度快
• 虽然会造成重新渲染的浪费，但是会大大减少两个虚拟DOM比对的性能消耗