虚拟dom一定比真实dom快吗

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

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

导读：虚拟dom一定比真实dom快吗，在这个执行结果中，我们明确的发现虚拟的耗时已经是真实 DOM 耗时的 40倍差距了。看到这里可能有些同学会说：这是因为虚拟DOM 远比真实 DOM 复杂的

虚拟dom一定比真实dom快吗

在这个执行结果中，我们明确的发现虚拟的耗时已经是真实 DOM 耗时的 40倍差距了。

看到这里可能有些同学会说：这是因为虚拟DOM 远比真实 DOM 复杂的原因导致的。所以接下来咱们就把两边的复杂性调整一直，然后看看最终的测试数据

5、复杂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++) {
      // 创建 div 元素
      const container = document.createElement('div');
      container.id = 'container';
      // 创建 h1 元素
      const h1 = document.createElement('h1');
      h1.textContent = 'Hello, World!';
      // 创建 ul 元素
      const ul = document.createElement('ul');
      // 创建三个 li 元素，并添加到 ul 元素中
      const li1 = document.createElement('li');
      li1.textContent = 'Item 1';
      ul.appendChild(li1);
      const li2 = document.createElement('li');
      li2.textContent = 'Item 2';
      ul.appendChild(li2);
      const li3 = document.createElement('li');
      li3.textContent = 'Item 3';
      ul.appendChild(li3);
      // 将 h1 和 ul 元素添加到 container 元素中
      container.appendChild(h1);
      container.appendChild(ul);
      // 将 container 元素添加到 #app2 元素中
      const app = document.querySelector('#app');
      app.appendChild(container);
    }
    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>

以上代码维持了两边同样的复杂程度，大家可以猜一猜最终的性能消耗会是什么情况呢？

查看最终的打印结果可以发现：

虚拟dom一定比真实dom快吗