[腾讯一面]Virtual Dom 的优势在哪里?
Virtual Dom有patch算法,根据新旧vnode比较经过优化查找到不同的节点修补、更新。不会暴力的直接覆盖DOM。 Virtual Dom优势在于直接频繁的操作DOM效率远低于操作JavaScript的效率,使用JavaScript的成本取代DOM成本。
频繁操作DOM会导致大量的回流和重绘,会造成网页的卡顿。
Virtual Dom将DOM节点抽象为一个JS对象,同时只保留了核心的属性,对Virtual Dom的操作比直接操作DOM更为高效,同时Virtual Dom还配合使用diff算法,每次操作时会比较新老节点的不同,计算出渲染为真实dom 的最小代价操作,再渲染为真实DOM。
实际上这是一种利用JS运算成本来换取DOM执行成本的操作,而JS的运算速度快很多,所以这是一种比较划算的做法。
「Virtual Dom 的优势」其实这道题目面试官更想听到的答案不是上来就说「直接操作/频繁操作 DOM 的性能差」,如果DOM操作的性能如此不堪,那么 jQuery 也不至于活到今天。所以面试官更想听到 VDOM 想解决的问题以及为什么频繁的 DOM 操作会性能差。
首先我们需要知道:
- DOM 引擎、JS 引擎 相互独立,但又工作在同一线程(主线程)
- JS 代码调用 DOM API 必须 挂起 JS 引擎、转换传入参数数据、激活 DOM 引擎,DOM 重绘后再转换可能有的返回值,最后激活 JS 引擎并继续执行若有频繁的 DOM API 调用,且浏览器厂商不做“批量处理”优化,
- 引擎间切换的单位代价将迅速积累若其中有强制重绘的 DOM API 调用,重新计算布局、重新绘制图像会引起更大的性能消耗。
其次是 VDOM 和真实 DOM 的区别和优化:
- 虚拟 DOM 不会立马进行排版与重绘操作
- 虚拟 DOM 进行频繁修改,然后一次性比较并修改真实 DOM 中需要改的部分,最后在真实 DOM 中进行排版与重绘,减少过多DOM节点排版与重绘损耗
- 虚拟 DOM 有效降低大面积真实 DOM 的重绘与排版,因为最终与真实 DOM 比较差异,可以只渲染局部
Virtual Dom 的核心价值是一种视图层的表达力,可以用纯 javascript 对象去描述界面应该渲染成什么样子。有关Virtual Dom 更深入的优势讲解来源 2019VueConf https://www.yuque.com/vueconf/2019/gwn1z0
以前也常认为是虚拟DOM会比原生快,后来在知乎上看到这篇文章:https://www.zhihu.com/question/31809713 才明白虚拟DOM的目的是为了能 声明式、基于状态驱动UI的开发,除此之外,它还可以渲染除 DOM 以外的 backend,比如 ReactNative
我一面也面到这个了
跨平台