阅读 4120

虚拟DOM的优劣如何

一、何为虚拟DOM

解释1:用js模拟一颗DOM树,放在浏览器的内存中,当需要变更时,虚拟DOM进行diff算法进行新旧虚拟DOM的对比,将变更放入到队列中。反应到实际的DOM上,减少DOM的操作。

解释2:虚拟DOM将DOM转换为一颗js树。diff算法逐级的进行比较、删除、新增操作。但是如果存在多个相同的元素可能比浪费性能,所以React和Vue引用key值进行区分。

二、为什么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将大大降低视图呈现和交互的效率。

三、为什么我们要使用虚拟DOM?

  • 保证性能下限
  • 不需要手动优化的情况下,我依然可以给你提供过得去的性能
  • 跨平台

四、保证性能下线

框架的虚拟 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:它保证了不管你的数据变化多少,每次重绘的性能都可以接受。保证了性能的下线。

五、不需要手动优化的情况下,我依然可以给你提供过得去的性能

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

六、跨平台

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

参考:网上都说操作真实 DOM 慢,但测试结果却比 React 更快,为什么?

文章分类
前端
文章标签