【JS】922- Virtual DOM 认知中的一些误区

朱雀 2022-11-17 10:09 122阅读 0赞

![9211afacaf6f0747369f6ec30b4278ec.png][]

在当下最流行的两个前端框架都存在 Virtual DOM 的前提下， 渐渐比较多的听到类似“使用 Virtual DOM 有什么优势？” 的面试题，但一直没有太在意。直到今天在写一个文档时，突让想到要把“为什么需要 Virtual DOM ？”也写进去，待我流畅的写好答案，略一思索——漏洞百出！也不知道是接纳了哪方的知识，让我一直有能轻松回答这个问题的错觉， 其实对于这个问题我是缺乏思考的。

你或许还不清楚我想说什么，但请耐下心来，先来看看网络上关于此问题的一些见解：

虚拟DOM同样也是操作DOM，为啥说它快？\[1\]

1.  虚拟DOM不会进行排版与重绘操作；
2.  虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗；
3.  真实DOM频繁排版与重绘的效率是相当低的；
4.  虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部（同2）。

Virtual Dom 的优势在哪里？\[2\]

1.  具备跨平台的优势，由于 Virtual DOM 是以 JavaScript 对象为基础而不依赖真实平台环境，所以使它具有了跨平台的能力，比如说浏览器平台、Weex、Node 等。
2.  操作 DOM 慢，js运行效率高。我们可以将DOM对比操作放在JS层，提高效率。因为DOM操作的执行速度远不如Javascript的运算速度快，因此，把大量的DOM操作搬运到Javascript中，运用patching算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。
3.  提升渲染性能 Virtual DOM的优势不在于单次的操作，而是在大量、频繁的数据更新下，能够对视图进行合理、高效的更新。

Virtual Dom的优势\[3\]

1.  不会立即进行排版与重绘;
2.  VDOM频繁修改，一次性比较并修改真实DOM中需要修改的部分，最后在真实DOM中进行重排 重绘，减少过多DOM节点重排重绘的性能消耗；
3.  VDOM有效降低大面积真实DOM的重绘与重排，与真实DOM比较差异，进行局部渲染；

上面是从 Google 搜索到的三个平台中的分析摘选，总结下来大概四点：

1.  操作 DOM 太慢，操作 Virtual DOM 对象快
2.  使用 Virtual DOM 可以避免频繁操作 DOM ，能有效减少回流和重绘次数（如果有的话）
3.  有 diff 算法，可以减少没必要的 DOM 操作
4.  跨平台优势，只要有 JS 引擎就能运行在任何地方（Weex/SSR）

它们的理解正确吗？*本文测试数据都基于 Chrome 86.0.4240.198*

## Virtual DOM 快？ ##

有人认为操作 Virtual DOM 速度很快？Virtual DOM 是一个用来描述 DOM（注意，并不一定一一对应）的 Javascript 对象，Javascript 操作 Javascript 对象自然是快的。但 Virtual DOM 仍然需要调用 DOM API 去生成真实的 DOM ，而你其实是可以直接调用它们的，所有就有一个很有意思结论，正数再小也不可能比零还小——Virtual DOM 很快，但这并不是它的优势，因你本可以选择不使用 Virtual DOM 。除了速度不是优势，Virtual DOM 还有个最大的问题——额外的内存占用，以 Vue 的 Virtual DOM 对象为例，100W 个空的 Virtual DOM(Vue) 会占用 110M 内存。内存占用截图：

![b1af7a35d6df24dc72440bcbb0f7dcec.png][]

测试代码：

let creatVNode = function(type) {
      return {
        __v_isVNode: true,
        SKIP: true,
        type,
        props: null,
        key: null,
        ref: null,
        scopeId: 0,
        children: null,
        component: null,
        suspense: null,
        ssContent: null,
        ssFallback: null,
        dirs: null,
        transition: null,
        el: null,
        anchor: null,
        target: null,
        targetAnchor: null,
        staticCount: 0,
        shapeFlag: 0,
        patchFlag: 0,
        dynamicProps: null,
        dynamicChildren: null,
        appContext: null
      }
    }
    
    let counts = 1000000
    let list = []
    let start = performance.now()
    // 创建 VNode(Vue)
    // 10000: 1120k
    for (let i = 0; i < counts; i++) {
      list.push(creatVNode('div'))
    }
    
    // 创建 DOM
    // 10000: 320k
    // for (let i = 0; i < counts; i++) {
    //   list.push(document.createElement('div'))
    // }
    
    console.log(performance.now() - start)

\_令人意外的是 100W 个空的 DOM 对象只占用 45M 内存，不清楚在 DOM 属性明显更多的情况下 Chrome 是如何优化的，或则是 Dev Tools 存在问题，希望有人能替我解惑。\_你看 Virtual DOM 不但执行快没有用，还增加了大量的内存消耗，所以我们说它快自然是有问题的，因为没有 Virtual DOM 时更快。

## Virtual DOM 减少回流和重绘？ ##

也有人认为 Virtual DOM 能减少页面的 relayout 和 repaint ？通常有两个原因来支撑这个观点：

1.  DOM 操作会先改变 Virtual DOM ，所以一些无效该变（比如把文本 A 修改为 B ，然后再修改为 A）就不会调用 DOM API ，也就不会导致浏览做无效的回流和重绘。
2.  DOM 操作会先改变 Virtual DOM ，最终由 Virtual DOM 调用 `patch` 方法批量操作 DOM ，批量操作就不会导致过程中出现无意义的回流和重绘。

### 无效回流与重绘 ###

第一个观点看着很有道理，但有个问题很难解释：浏览器的 UI 线程在什么时候去执行回流和重绘？要知道现代浏览器在设计上为了避免高复杂度，Javascript 线程和 UI 线程是互斥的，即如果浏览器要在 Javascript 执行期间触发 relayout/repaint 则必须先挂起 Javascript 线程，这是个连我都觉得蠢的设计，显然不会出现在各大浏览器身上。事实上也确实如此，无论你在一次事件循环中调用多少次的 DOM API ，浏览器也只会触发一次回流与重绘（如果需要），并且如果多次调用并没有修改 DOM 状态，那么回流与重绘一次都不会发生。Timeline 截图（没有回流和重绘发生）：

![93fd06d1cd120987257d1e5f36ea79be.png][]

测试代码：

<body>
      <div class="app"></div>
      <script> let counts = 1000
        let $app = document.querySelector('.app')
        setTimeout(() => {
          for (let i = 0; i < counts; i++) {
            $app.innerHTML = 'aaaa'
            $app.style = 'margin-top: 100px'
            $app.innerHTML = ''
            $app.style = ''
          }
        }, 1000) </script>
    </body>

### 无意义的回流与重绘 ###

第二个观点是比较有意思的，虽然看了上面的分析，你应该也知道它是错的，批量操作并不能减少回流与重绘，因为它们本身就只会触发一次。但我还是要列出来证明一下，因为这是我们当下众多前端的一个固有思维，我在准备写这篇文章前问了一下众神交流群的朋友们，他们几乎都掉进了这个认知陷阱中，认为批量操作会减少回流与重绘。批量操作并不能减少回流与重绘，原因也和上文一致，Javascript 是单线程且与 UI 线程互斥，所以直接放测试数据：Javascript 执行耗时（数据取3次平均值）：![a0af1a58f64b0e370122896b51bc2330.png][]

![3349614c687e98c26b4b3268d7c7b37f.png][]

Layout 耗时（数据取3次平均值）：![b6a62abc9e6306bb909ba60fbf982cc5.png][]

![33fd4c429151d950d194f3b7ae753ac3.png][]

测试代码：

<body>
      <div class="app"></div>
      <script> let counts = 1000
        let $app = document.querySelector('.app')
        let start = performance.now()
        // 单独操作
        // for (let i = 0; i < counts; i++) {
        //   let node = document.createTextNode(`${i}, `)
        //   $app.append(node)
        // }
    
        // 批量操作
        let $tempContainer = document.createElement('div')
        for (let i = 0; i < counts; i++) {
          let node = document.createTextNode('node,')
          $tempContainer.append(node)
        }
        $app.append($tempContainer)
    
        console.log(performance.now() - start) </script>
    </body>

可以看到的是，批量处理和单次处理再 Layout 期间耗时是几乎一致的，虽然在 script 执行阶段还是存在一定的性能优势（大概 30%），但大抵上只要你用好 DOM 操作，批量或不批量带来的性能影响是很小的（ 10W 次调用多损耗 27ms ）。题外话：这里提出一个问题，为什么在 script 执行阶段还是存在一定的性能差距？答案会在晚些时候公布（等我看完这部分逻辑）

## Virtual DOM 有 diff 算法？ ##

严格来说 diff 算法和 Virtual DOM 是两个独立的东西，二者互相之间也没有充分必要的关联，比如 svelte\[4\] 没有 Virtual DOM 也有其自己的 diff 算法。但由于前端框架存在 Virtual DOM 就总有 diff 算法，并且使用了 Virtual DOM 对 diff 算法也有两个助力：

1.  得益于 Virtual DOM 的抽象能力，diff 算法更容易被实现和理解
2.  得益于 Virtual DOM Tree 总是在内存中， diff 算法功能可以更强大（比如组件移动，没有完整的 Tree 结构是不可能实现的）

diff 算法能减少 DOM API 调用，显然是存在设计和性能优势的，而由于 Virtual DOM 的存在，diff 算法可以更方便且更强大，所以我认同这是 Virtual DOM 的优势，但不能用“Virtual DOM 有 diff 算法”这样的表述。

## Virtual DOM 有跨平台优势？ ##

上文提到的 svelte 没有 Virtual DOM ，但一样可以实现服务端渲染，这说明跨平台并不依赖于 Virtual DOM 。其实只要 Javascript 框架有实现平台 API 分发机制，就能在不同平台执行不同的渲染方法，即拥有跨平台能力。这个能力的根本，是 Javascript 代码能低代价地在各个平台运行（得利于浏览器在各个平台的普及和 NodeJS），也就是常说的 Javascript 的优势之一是跨平台。所以把跨平台当做 Virtual DOM 的优势，其实是不正确的，但我们或许应该去思考下他们为什么会这么认为。我的想法，可能是这两个原因：

1.  Virtual DOM 的优势，可以在不接触真实 DOM 的情况下操作 DOM，并且性能更好在 Virutal DOM 上的改动，最终还是会调用平台 API 去操作真实的 DOM ，所以没有 Virtual DOM 只是相当于少了一个中间抽象层，并不影响跨平台能力有无。但还是需要明白，就目前的分析来看，这个抽象层对跨平台能力还是提供了相当大的方便（或者说助力）的。
2.  Virtual DOM 在 Vue 中很重要，Vue 本身就是一个围绕 Virtual DOM 创建起来的框架，脱离了 Virtual DOM 其设计思想必然会和当下迥乎不同

## 总结 ##

本文从互联网上摘选了部分对开发者对 Virtual DOM 优点的认知，也从现实生活中了解到一些误解，总结为 Virtual DOM 的四个“优势”，并分别对这四个“优势”进行了单独分析或举证。最终我们识别了几个关于 Virtual DOM 优势误区：

1.  操作 DOM 太慢，操作 Virtual DOM 对象快 ❌ （Virtual DOM 很快，但这并不是它的优势，因你本可以选择不使用 Virtual DOM ）；
2.  使用 Virtual DOM 可以避免频繁操作 DOM ，能有效减少回流和重绘次数 ❌ （无论你在一次事件循环中调用多少次的 DOM API ，浏览器也只会触发一次回流与重绘（如果需要），并且如果多次调用并没有修改 DOM 状态，那么回流与重绘一次都不会发生。批量操作也不能减少回流与重绘）；
3.  Virtual DOM 有跨平台优势 ❌ （跨平台是 Javascript 的优势，与 Virtual DOM 无关）。

我们也提到了 Virtual DOM 真正的优点是其抽象能力和常驻内存的特性，让框架能更容易实现更强大的 diff 算法，缺点是增加了框架复杂度，也占用了更多的内存。

**参考资料**

\[1\]虚拟DOM同样也是操作DOM，为啥说它快？ (https://segmentfault.com/q/1010000010303981)\[2\]Virtual Dom 的优势在哪里？( https://github.com/RomanHc/blog/issues/20)  
\[3\]Virtual Dom的优势 (https://juejin.cn/post/6844904179715014669)  
\[4\]svelte(https://github.com/sveltejs/svelte)

*  本文作者：莫得盐
 *  本文链接：https://juejin.cn/post/6898526276529684493

![82e2f72c723d68b477fda49302d357ec.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![f1f4e6250675e74db48a13d644330476.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[9211afacaf6f0747369f6ec30b4278ec.png]: /images/20221022/96b4b9082a874f4a8b34f0a6cec2c6a4.png
[b1af7a35d6df24dc72440bcbb0f7dcec.png]: /images/20221022/1145322193084572b2fe33300e3dbb65.png
[93fd06d1cd120987257d1e5f36ea79be.png]: /images/20221022/8d0a0dad24064a378975305de12d35c3.png
[a0af1a58f64b0e370122896b51bc2330.png]: /images/20221022/b2ac21ef5e7047ed9e521da64ebf1371.png
[3349614c687e98c26b4b3268d7c7b37f.png]: /images/20221022/d34b86b20c4c4041add3ec1313332e3d.png
[b6a62abc9e6306bb909ba60fbf982cc5.png]: /images/20221022/d2f0b24e6a3345a38527a1d50a7c51ce.png
[33fd4c429151d950d194f3b7ae753ac3.png]: /images/20221022/7481e0cc142747478962dfc2b7998869.png
[82e2f72c723d68b477fda49302d357ec.gif]: /images/20221022/881646bf17f845b59a72efa5a9d9870d.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[f1f4e6250675e74db48a13d644330476.gif]: /images/20221022/9aa1973023d14462bdeebadbcf34daef.png