为何需要虚拟DOM算法?
事物的产生,是因为存在痛点。然后利用现有优势,通过创新和取舍进行改善。
浏览器环境的痛点是 DOM 的架构导致 DOM 太慢,并且还未得到有效优化;
优势在于Javascript 引擎持续发展,在现代浏览器中 JavaScript 的执行速度已经非常快。
![d96cef261cfe1fd59835015549f073bc.png](https://i-blog.csdnimg.cn/blog_migrate/8c454af18213310ae03e71a5b1c24772.jpeg)
DOM 太慢可以体现在两个方面:
- DOM 节点太重,如上图所示,一个 DOM 节点内建类有非常深的继承关系,并且还要附加上事件处理。创建一个 DOM 节点的代价相对于创建一个简单 JavaScript 对象要高很多。
- DOM 操作容易引发重绘、重排,这由浏览器的渲染机制决定,无法从代码层面改变。问题在于开发者使用 DOM 操作不够高效,无法最大化地避免重绘、重排。
那么,用 JavaScript 对象是否可以避免这两个问题呢?
- 保持轻量:用一个 JavaScript 对象描述一个 DOM 节点,只记录节点的特性、父子关系等必要信息。
- 操作⇏渲染:相对于 DOM 操作,对 JavaScript 对象进行操作更快更简单,并且没有与浏览器渲染机制直接关联,不会触发副作用。
- 高效操作:记录下对象更改的部分,自动计算出最小代价的 DOM 更改方案,避免人为因素导致低效渲染。JavaScript 对象这一中间层,将更新和渲染分离开,甚至可以达到批量渲染效果。
什么是虚拟DOM算法
我们把用于描述 DOM 节点的 JavaScript 对象称为虚拟DOM。上面提到的优化思路,可以总结为 “虚拟DOM算法”:
- 在初始化时:生成一颗虚拟DOM树。根据虚拟DOM树构建一颗真正的DOM树,插入文档里。
- 在状态变更时:
- 进行协调:生成一颗新的虚拟DOM树,比较新旧两树,记录差异的部分。
- 渲染更新:根据差异部分计算出最小代价的 DOM 更改方案,将更改应用到 DOM 树中。
虚拟DOM算法的核心三部分:初始化、协调、更新。