当前位置：主页 > 经验教程 > 建站编程 >

虚拟dom一定比真实dom快吗

虚拟dom一定比真实dom快吗虚拟DOM是否比真实DOM更高效？(2)

时间：2024-03-23 15:00:27 来源：IT袋作者：马勇

导读：虚拟dom一定比真实dom快吗，此时，第一次的打印为真实DOM 的耗时，第二次的打印为 JS 数组操作的耗时最终打印结果如下：通过耗时对比我们可以很清楚的看到：在简单的 DOM 操作

虚拟dom一定比真实dom快吗

此时，第一次的打印为真实DOM 的耗时，第二次的打印为JS 数组操作的耗时

最终打印结果如下：

虚拟dom一定比真实dom快吗

通过耗时对比我们可以很清楚的看到：在简单的 DOM 操作与简单的数据操作对比下，DOM 操作的耗时大约是数据操作的23倍左右。

3、DOM 操作与 VNode 操作对比

<body>
  <div id="app"></div>
  <script>
    const COUNT = 10000
    console.time('dom 耗时')
    for (let i = 0; i < COUNT; i++) {
      const ele = document.createElement('div')
      ele.innerHTML = 'hello bunian'
      document.querySelector('#app').appendChild(ele)
    }
    console.timeEnd('dom 耗时')
    const { h } = Vue
    console.time('js 耗时')
    const vNodes = []
    for (let i = 0; i < COUNT; i++) {
      const vNode = h('div', 'hello bunian')
      vNodes.push(vNode)
    }
    console.timeEnd('js 耗时')
  </script>
</body>

在这个代码中，我们使用了 Vue 中的 h 函数来构建了 Vnode，这样构建出的 VNode 对象结构上会更加复杂。从而可以验证出当对象的结构变得更加复杂时，对 JS 耗时的影响会有多大

执行以上代码，得出的结果如下：

虚拟dom一定比真实dom快吗

根据执行结果我们可以看出：当使用到了 h 函数时，JS 耗时明显增加。增加耗时的原因有两个：

h 函数生成对象的耗时
vNode 变得更加复杂时，push 的耗时

那么，假如VNode 变得超级复杂的时候，JS 的耗时会超过真实DOM 操作吗？

我们来看下一次的实验

4、DOM 操作与复杂VNode 操作对比

<body>
  <div id="app"></div>
  <div id="app2"></div>
  <script>
    const COUNT = 10000
    console.time('dom 耗时')
    for (let i = 0; i < COUNT; i++) {
      const ele = document.createElement('div')
      ele.innerHTML = 'hello bunian'
      document.querySelector('#app').appendChild(ele)
    }
    console.timeEnd('dom 耗时')
    const { h, render } = Vue
    console.time('js 耗时')
    const vNodes = []
    for (let i = 0; i < COUNT; i++) {
      const vNode = h('div', { id: 'container' }, [
        h('h1', null, ['Hello, World!']),
        h('ul', null, [
          h('li', null, ['Item 1']),
          h('li', null, ['Item 2']),
          h('li', null, ['Item 3'])
        ])
      ]);
      // vNodes.push(vNode)
      render(document.querySelector('#app2'), vNode)
    }
    console.timeEnd('js 耗时')
  </script>
</body>

在这个代码中，我们使用 h 函数构建了一个嵌套的 VNode 结构，这个结构其实就比较复杂了。咱们来看看它的执行结果：