温故知新（六三）对虚拟 DOM 的理解，虚拟 DOM 主要做了什么，虚拟 DOM 本身是什么

对虚拟 DOM 的理解，虚拟 DOM 主要做了什么，虚拟 DOM 本身是什么

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

答案：

一、什么是 虚拟 DOM

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

虚拟 DOM 是对 DOM 的抽象，这个对象是对 DOM 的描述，这个对象是更加轻量级的对 DOM 的描述。他设计的最初目的，就是更好的跨平台，比如 Node.js 就没有 DOM ，如果想实现 SSR，那么，一个方式就是借助虚拟 DOM ，因为虚拟 DOM 本身就是 JS 对象。

在代码渲染到页面之前，vue 或者 rect 会把代码转换成一个对象（虚拟 DOM）。以对象的形式来描述真实的 DOM 结构，最终渲染到页面，在每次数据发生变化前，虚拟 DOM 都会缓存一份，变化之时现在的虚拟 DOM 会和缓存的虚拟 DOM 进行比较。

在 vue 或者 rect 内部封装了 diff 算法，通过这个算法，来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染。

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

二、为什么要使用 Virtual DOM

1.保证性能下限，在不进行手动优化的情况下，提供过得去的性能

页面渲染过程：解析 HTML => 生成 DOM => 生成 CSSOM => Layout => Paint => Compiler

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

真实 DOM ：生成 HTML 字符串 +  重建所有的 DOM 元素

虚拟 DOM ：生成 Virtual Node + DOMDiff + 必要的 DOM 更新

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

2.跨平台

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

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

1.首次渲染大量的 DOM 时，由于多了一层虚拟 DOM 的计算，会比 innerHTML 插入慢。

2.正如它能保证性能下限，在真实的 DOM 操作的时候进行针对性的优化时，还是更快的。