虚拟dom_探索：如何理解虚拟DOM算法

为何需要虚拟DOM算法？

事物的产生，是因为存在痛点。然后利用现有优势，通过创新和取舍进行改善。

浏览器环境的痛点是 DOM 的架构导致 DOM 太慢，并且还未得到有效优化；

优势在于Javascript 引擎持续发展，在现代浏览器中 JavaScript 的执行速度已经非常快。

DOM节点的内建类关系

DOM 太慢可以体现在两个方面：

• DOM 节点太重，如上图所示，一个 DOM 节点内建类有非常深的继承关系，并且还要附加上事件处理。创建一个 DOM 节点的代价相对于创建一个简单 JavaScript 对象要高很多。
• DOM 操作容易引发重绘、重排，这由浏览器的渲染机制决定，无法从代码层面改变。问题在于开发者使用 DOM 操作不够高效，无法最大化地避免重绘、重排。

那么，用 JavaScript 对象是否可以避免这两个问题呢？

• 保持轻量：用一个 JavaScript 对象描述一个 DOM 节点，只记录节点的特性、父子关系等必要信息。
• 操作⇏渲染：相对于 DOM 操作，对 JavaScript 对象进行操作更快更简单，并且没有与浏览器渲染机制直接关联，不会触发副作用。
• 高效操作：记录下对象更改的部分，自动计算出最小代价的 DOM 更改方案，避免人为因素导致低效渲染。JavaScript 对象这一中间层，将更新和渲染分离开，甚至可以达到批量渲染效果。

什么是虚拟DOM算法

我们把用于描述 DOM 节点的 JavaScript 对象称为虚拟DOM。上面提到的优化思路，可以总结为 “虚拟DOM算法”：

1. 在初始化时：生成一颗虚拟DOM树。根据虚拟DOM树构建一颗真正的DOM树，插入文档里。
2. 在状态变更时：
   1. 进行协调：生成一颗新的虚拟DOM树，比较新旧两树，记录差异的部分。
   2. 渲染更新：根据差异部分计算出最小代价的 DOM 更改方案，将更改应用到 DOM 树中。

虚拟DOM算法的核心三部分：初始化、协调、更新。

参考资料

如何理解虚拟DOM?​www.zhihu.com