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

虚拟dom一定比真实dom快吗

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

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

导读：虚拟dom一定比真实dom快吗，今日重点为您介绍虚拟dom一定比真实dom快吗的电脑小知识，下面小编为您详细解答虚拟DOM（VNode）和真实DOM的渲染效率问题一直是面试中高频、高难度话题。昨天有个

虚拟dom一定比真实dom快吗

今日重点为您介绍虚拟dom一定比真实dom快吗的电脑小知识，下面小编为您详细解答

虚拟DOM（VNode）和真实DOM的渲染效率问题一直是面试中高频、高难度话题。

昨天有个同学在面试中就被问到了这个问题。

面试官提问说：“虚拟DOM（VNode）渲染效率一定比真实DOM 快吗？你是如何得到的这个结论？你的依赖数据是什么？”

好吧… 大厂的面试就是不一样，光靠背八股文肯定是混不过去了。

那么今天，就让咱们带着这三个问题，一起来看看 虚拟DOM（VNode）和真实DOM 的真实渲染效率，以及测试、依赖数据！

1、测试逻辑

在去讲解测试逻辑之前，我们先来明确一下什么叫做虚拟DOM 和真实DOM。

虚拟DOM

所谓虚拟DOM指的是：通过 JS 对象来模拟 DOM 结构。

所以我们可以简单的把虚拟DOM 理解为 JS 对象。只不过这个 JS 对象比较复杂一些而已。

真实DOM

所谓真实DOM就是：通过 JS 获取到的 html 标签元素。

比如，我们通过document.querySelect('#app')拿到的这个元素就被成为 DOM 元素，也就是真实DOM。

测试逻辑

那么明确好了两个基本概念之后，接下来咱们就说下测试方案。整个测试方案分成 4 个部分：

DOM 操作和 JS 操作对比：来看下 DOM 操作和 JS 操作的性能耗时差异
DOM 操作和 VNode 操作对比：来看下涉及到 VNode 操作时，性能差异
DOM 操作和复杂的VNode 操作对比：来看下当 VNode 变得复杂时，性能消耗增加了多少
复杂DOM 操作与复杂VNode 操作对比：来看下当 DOM 操作都变得复杂时，性能消耗差异

明确好了以上内容之后，就让咱们开始吧~~

2、DOM 操作与数据操作对比

<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 耗时')
    console.time('js 耗时')
    const vNodes = []
    for (let i = 0; i < COUNT; i++) {
      const vNode = {
        type: 'div'
      }
      vNodes.push(vNode)
    }
    console.timeEnd('js 耗时')
  </script>
</body>

在以上代码中，我们首先标记了一个数量值COUNT它表示循环执行的次数。然后我们利用console.time和 console.timeEnd来记录执行时间，这里打印出来的时间就是我们的耗时。

12 3 4 下一页