[腾讯一面]Virtual Dom 的优势在哪里？

[mqyqingfeng]

[WSQ233]

Virtual Dom有patch算法，根据新旧vnode比较经过优化查找到不同的节点修补、更新。不会暴力的直接覆盖DOM。
Virtual Dom优势在于直接频繁的操作DOM效率远低于操作JavaScript的效率，使用JavaScript的成本取代DOM成本。

[ed1son67]

频繁操作DOM会导致大量的回流和重绘，会造成网页的卡顿。

Virtual Dom将DOM节点抽象为一个JS对象，同时只保留了核心的属性，对Virtual Dom的操作比直接操作DOM更为高效，同时Virtual Dom还配合使用diff算法，每次操作时会比较新老节点的不同，计算出渲染为真实dom 的最小代价操作，再渲染为真实DOM。

实际上这是一种利用JS运算成本来换取DOM执行成本的操作，而JS的运算速度快很多，所以这是一种比较划算的做法。

[yanm1ng]

「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 比较差异，可以只渲染局部

[konglingwen94]

Virtual Dom 的核心价值是一种视图层的表达力，可以用纯 javascript 对象去描述界面应该渲染成什么样子。有关Virtual Dom 更深入的优势讲解来源 2019VueConf https://www.yuque.com/vueconf/2019/gwn1z0

[johanazhu]

以前也常认为是虚拟DOM会比原生快，后来在知乎上看到这篇文章：https://www.zhihu.com/question/31809713
才明白虚拟DOM的目的是为了能 声明式、基于状态驱动UI的开发，除此之外，它还可以渲染除 DOM 以外的 backend，比如 ReactNative

[zhuzhile]

我一面也面到这个了

[gastrodia]

跨平台