虚拟DOM

一、 什么是虚拟DOM

　　 虚拟DOM就是真实的JS对象，用javascript对象以DOM树结构的方式来替代DOM。

 

二、 为什么使用虚拟DOM

　　1. 操作内存中的JS对象比操作真实的DOM速度要快。

　　2. 直接操作真实的DOM，只要有一行数据发生改变，就要重绘整个页面；而虚拟DOM可以借助diff算法，以最小的改动更新DOM。

 

三、 虚拟DOM实现过程

　　1. 用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中，并缓存这个js对象。

　　2. 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树用diff进行比较，记录两棵树差异。

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

 

四、 了解diff算法

　　1. 比较只会在同层级进行, 不会跨层级比较。

　　2. 深度遍历优先，先比较父节点，比完往下找子节点对比，一直到子节点结束，然后对比上一级的兄弟节点。