虚拟DOM的优劣如何

1、何为虚拟DOM

解释1：用js模拟一颗DOM树，放在浏览器的内存中，当须要变动时，虚拟DOM进行diff算法进行新旧虚拟DOM的对比，将变动放入到队列中。反应到实际的DOM上，减小DOM的操做。

解释2：虚拟DOM将DOM转换为一颗js树。diff算法逐级的进行比较、删除、新增操做。可是若是存在多个相同的元素可能比浪费性能，因此React和Vue引用key值进行区分。

2、为何DOM渲染慢？

所谓DOM渲染，即浏览器将HTML字符串转换成网页视图并渲染视图的过程。

1. 首先，浏览器的HTML解析器，会对HTML字符串进行解析，并将它转换成DOM树，同时，CSS解析器也会解析HTML使用到的CSS样式，生成一系列CSS规则。
2. 而后浏览器的渲染引擎将DOM树和CSS规则进行整合，并生成一个可用于视图渲染的DOM渲染树。
3. 接着肯定DOM布局，即每个节点在浏览器中的确切位置。
4. 最后一步是进行绘制，将每个节点的每个像素都绘制在屏幕上。

为了理解这一过程的复杂性，咱们能够对HTML解析器的处理作一个特写：在HTML解析器中，有两个程序交替执行：分词程序和解析程序；分词程序负责将HTML字符串划分红合法的DOM标签字符串，而后将它们交给用于处理的解析器，解析器将它们添加到正在构建的DOM树中；当分词器解析全部字符串时，将构建DOM树。

您能够理解为何DOM呈现如此缓慢：这个过程真的太复杂了。在web页面交互中添加和删除DOM将大大下降视图呈现和交互的效率。

3、为何咱们要使用虚拟DOM？

• 保证性能下限
• 不须要手动优化的状况下，我依然能够给你提供过得去的性能
• 跨平台

4、保证性能下线

框架的虚拟 DOM 须要适配任何上层 API 可能产生的操做，它的一些 DOM 操做的实现必须是普适的，因此它的性能并非最优的；可是比起粗暴的 DOM 操做性能要好不少，所以框架的虚拟 DOM 至少能够保证在你不须要手动优化的状况下，依然能够提供还不错的性能，即保证性能的下限；

例如比较 innerHTML vs. Virtual DOM 的重绘性能消耗：

• innerHTML: render html string O(template size) + 从新建立全部 DOM 元素 O(DOM size)
• Virtual DOM: render Virtual DOM + diff O(template size) + 必要的 DOM 更新 O(DOM change)

Virtual DOM render + diff 显然比渲染 html 字符串要慢，可是！它依然是纯 js 层面的计算，比起后面的 DOM 操做来讲，依然便宜了太多。

能够看到，innerHTML 的总计算量无论是 js 计算仍是 DOM 操做都是和整个界面的大小相关，但 Virtual DOM 的计算量里面，只有 js 计算和界面大小相关，DOM 操做是和数据的变更量相关的。

前面说了，和 DOM 操做比起来，js 计算是极其便宜的。这才是为何要有 Virtual DOM：它保证了无论你的数据变化多少，每次重绘的性能均可以接受。保证了性能的下线。

5、不须要手动优化的状况下，我依然能够给你提供过得去的性能

这里直接看看尤大大在知乎的一个解释。

6、跨平台

虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 能够进行更方便地跨平台操做，例如服务器渲染、weex 开发等等。

参考：网上都说操做真实 DOM 慢，但测试结果却比 React 更快，为何？