什么是虚拟DOM(Virtual DOM)

1、 先来个简单粗暴的回答

虚拟DOM就是一个JS对象，用他来描述真实DOM。

JS对象描述的DOM示例

2、官方回答

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

翻译如下：

Virtual DOM 是一种编程概念。在这个概念里， UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做协调。

3、虚拟DOM VS 直接操作原生DOM

操作原生DOM流程

1. 初始的数据
2. 数据填充进html模版，生成真实的DOM
3. 数据发生变化
4. 数据填充进html模版，生成真实的DOM，替换原始的DOM

虚拟DOM

1. 初始的数据
2. 数据填充进html模版，生成虚拟的DOM(用JS对象来描述刚刚生成的DOM)
3. 用虚拟的DOM结构生成真实的DOM
4. 数据发生变化
5. 数据填充进html模版，生成新的虚拟DOM
6. 比较两个虚拟的DOM之间的区别，即比较两个JS对象的变化
7. 直接操作DOM，修改有变化的DOM节点

4、虚拟DOM与原生DOM区别

1. 虚拟DOM不会进行排版与重绘操作
2. 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗
3. 真实DOM频繁排版与重绘的效率是相当低的
4. 虚拟DOM有效降低大面积（真实DOM节点）的重绘与排版，因为最终与真实DOM比较差异，可以只渲染局部

5、性能损耗

虚拟DOM
总损耗 = JS对象增删改（与Diff算法效率有关） + 真实DOM差异增删改 + 排版与重绘（较少的节点）

真实DOM
总损耗 = 真实DOM完全增删改 + 排版与重绘（较多的节点，节点较少时可能快于虚拟DOM）

参考资料：
网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？
React虚拟DOM浅析
虚拟DOM同样也是操作DOM，为啥说它快？