什么是虚拟 DOM?
从本质上来说，Virtual Dom 是一个 JS 对象，通过对象的方式来表示 DOM 结构。将页面的状态抽象为 JS 对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次 DOM 修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改 DOM 的重绘重排次数，提高渲染性能。
虚拟 dom 是对 DOM 的抽象，这个对象是更加轻量级的对 DOM 的描述。它设计的最初目的，就是更好的跨平台，比如 node.js 就没有 DOM，如果想实现 SSR，那么一个方式就是借助虚拟 dom，因为学你 dom 本身就是 js 对象。在代码渲染到页面之前，vue 或者 react 会把代码转换成一个对象(虚拟 DOM)。以对象的形式来描述真实 dom 结构，最终渲染到页面。在每次数据发生变化前，虚拟 dom 都会缓存一份，变化之时，现在的虚拟 dom 会与缓存的虚拟 dom 进行比较。
在 vue 或者 react 内部封装了 diff 算法，通过这个算法来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染。
另外现代前端框架的一个基本要求就是无需手动操作 DOM，一方面是因为手动操作 DOM 无法保证程序性能，多人协作的项目中如果 review 不严格，可能会有开发正写出性能较低的代码，另一方面更重要的是省略手动 DOM 操作可以大大提升开发效率
为什么要用 Virtual Dom？
- 1.保证性能下限，再不进行手动优化的情况下，提供能过得去的性能
看一下页面渲染的一个过程: 解析 HTML --- 生成 DOM --- 生成 cssDom -- Layout -- Paint -- Compiler
下面对比一下修改 DOM 时真实 DOM 操作和 Virtual Dom 的过程，来看一下它们重排重绘的性能消耗
真实 DOM：生成 HTML 字符串+重建所有的 DOM 元素
Virtual Dom：生成 VNode+DOMDiff+必要的 dom 更新 Virtual Dom 的更新 DOM 的准备工作耗费更多的时间，也就是 js 层面，相对于更多的 DOM 操作它的消费是极其便宜的。尤大大曾说到：框架给你的保证时，你不需要手动优化的情况下，我依然可以给你提供过得去的性能 - 2.跨平台
Virtual Dom 本质上时 JS 对象，可以很方便的跨平台操作，比如服务端渲染、uniapp 等
Virtual Dom 真的比真实 DOM 性能好么？
1.首次渲染大量 DOM 时，由于多了一层虚拟 DOM 的计算，比 innerHTML 插入慢
2.正如它能保证性能下限，在真实 DOM 操作的时候进行针对性的优化时，还是更快的。
