前言 #

为什么要有虚拟 dom ？

我们先来看看操作 dom 的代价：

  let div = document.createElement('div')
  let str = ''
  for (const key in div) {
    str += key + ''
  }
  console.log(str)

按下F12，打开开发者工具，将这段代码粘贴上去，会有惊喜。

从打印结果可以看出，一个 dom 会有很多属性；真实的 dom 节点入栈执行会占据很大的内存，在我们频繁的操作时，就会产生性能问题。

我们用传统的开发模式，用原生的 js 和 jq 操作 DOM 时，浏览器会从构建 DOM 树到绘制从头到尾执行一遍，如果我们更新 10 个 dom 节点，浏览器收到第一个 dom 请求后并不知道后面还有 9 次更新操作，最终会执行 10 次。

如果第一次计算完，紧接这下一个 DOM 更新请求更改了前一次的 DOM ；那么前一次的 dom 更新就是白白的性能浪费，虽然计算机硬件一直迭代更新，但是操作 dom 的代价仍然是昂贵的，频繁操作还会出现页面卡顿，影响用户体验。