frontend-interview-question-and-answer icon indicating copy to clipboard operation
frontend-interview-question-and-answer copied to clipboard

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

Open mqyqingfeng opened this issue 6 years ago • 7 comments

mqyqingfeng avatar Mar 09 '20 13:03 mqyqingfeng

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

WSQ233 avatar Mar 09 '20 14:03 WSQ233

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

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

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

ed1son67 avatar Mar 09 '20 14:03 ed1son67

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

yanm1ng avatar Mar 16 '20 04:03 yanm1ng

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

konglingwen94 avatar Mar 21 '20 03:03 konglingwen94

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

johanazhu avatar Jun 09 '21 04:06 johanazhu

我一面也面到这个了

zhuzhile avatar Aug 25 '21 11:08 zhuzhile

跨平台

gastrodia avatar Feb 21 '22 07:02 gastrodia