vue 虚拟dom

一、什么是虚拟 DOM

从本质来说，Virtual Dom 是一个 JavaScript 对象，通过对象的方式来表示 DOM 结构。将页面的状态抽象为 JS 对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次 DOM 修改的结果一次性更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。

虚拟 DOM 是对 DOM 的抽象，这个对象是更加轻量级的对 DOM 的描述。它设计的最初目的就是更好的跨平台，比如 Node.js 就没有 DOM，如果想实现 SSR，那么就只能借助虚拟 DOM，因为虚拟 DOM 本身就是 JS 对象，在代码渲染到页面之前，Vue 和 React 会把代码转化成一个对象（虚拟 DOM），以对象的形式来描述真实 DOM 结构，最终渲染到页面。在每次数据发生变化前，虚拟 DOM 都会缓存一份，变化之时，现在的虚拟 DOM 会与缓存的虚拟 DOM 进行比较。

Vue 和 React 内部都封装了 diff 算法用来进行比较渲染时的变化（具体 diff 算法内容后续重点分析），精准更新发生变化的节点，而没有发生变化的直接通过原先的数据进行渲染。

另外现代前端框架基本都要求无须手动操作 DOM，一方面是因为手动操作 DOM 无法保证程序的性能，多人协作的项目中如果 code review 不严格，很容易出现性能较低的代码，另一方面更重要的是省略手动操作 DOM 可以大大提高开发效率。

二、为什么要用 Virtual DOM

1.保证性能下限，在不进行手动优化的情况下，提供相对不错的性能

我们看一下页面渲染的流程：
解析HTML -> 生成 DOM -> 生成 CSSOM -> Layout -> Paint -> Compiler

下面对比一下修改 DOM 时真实 DOM 操作和 Virtual DOM 的过程，来看一下他们重排重绘的性能消耗：

• 真实DOM：生成 HTML 字符串 + 重建所有的 DOM 元素
• Virtual DOM：生成 vNode + DOMdiff + 必要的 DOM 更新

Virtual DOM 的更新 DOM 的准备工作耗费更多的时间，也就是 JS 层面，相对于更多的 DOM 操作它的消费是极其便宜的。尤大在社区论坛中说过：框架给你的保证是，在你不需要手动优化的情况下，我依然可以给你提供过得去的性能。

2.跨平台

Virtual DOM 本质上是 JavaScript 对象，它可以很方便的跨平台操作，比如服务端渲染、uniapp等等。

三、Virtual DOM 真的比真实 DOM 性能好吗

1. 首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，会比正常 innerHTML 插入慢。
2. Virtual DOM 能保证性能下限，在真实 DOM 操作的时候可以进行针对性的优化，在这时肯定是更快的，性能也会更好。