Virtual DOM 的优势在哪

最近在看 React，大家都说 React 通过 diff 算法比对新旧 DOM树，patch变更应用到真实 DOM实现 UI 同步，所以 React 的 Virtual DOM 效率高。

说的好有道理，可是为什么Virtual DOM 快？

首先，Virtual DOM 并不比原生 DOM 操作快，它只是在多次操作 DOM 的情况下效率会更高。比如我们对 1 个标签 <h1>111</h1> 修改内容为 222，React 需要新建 DOM 树，diff 比对修改前后的差异，应用变更，最后 render。这显然不如直接 DOM.innerText='222' 来的快。

我们可以实际对比一下 有Virtual DOM 的 React 与原生 JS 的区别，
在这个网站可以对不同框架进行 DOM 操作消耗时间进行对比。

先分别运行一次 React 与 Raw ，可以看到 React 大约需要 100+ms，原生 30ms。

再分别多次点击后， React 稳定在大约 10ms ，原生还是 30ms。

这就是 Virtual DOM 的优势所在了，它可以提高多次 DOM 操作的效率。

DOM 操作最耗时的是 Html Parse，而 React 的 Virtual DOM 优势就是将修改先修改在虚拟 DOM 上，比对与上次生成虚拟 DOM 的不同并修改，然后渲染（setState被设计为异步，是为了将短时间内的多次状态修改合并为一次）。所以除了第一次要新建 Virtual DOM 比原生花费更多的时间，之后的操作下就显示出了优势。

而原生 js 每次的 DOM 操作都要 Parse 解析走一遍，那多次操作当然就比不过 React。

参考

网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？
https://www.zhihu.com/question/31809713

一起理解 Virtual DOM
https://www.jianshu.com/p/bef1c1ee5a0e