一、React的虚拟DOM
在Web开发中，需要将数据的变化实时反映到UI上，这时就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为此，React引入了虚拟DOM（Virtual DOM）的机制。
一、什么是虚拟DOM？
在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为虚拟DOM（Virtual DOM）。它具有batching(批处理)和高效的Diff算法。只对界面上真正变化的部分进行实际的DOM操作。batching把所有的DOM操作搜集起来，一次性提交给真实的DOM。diff算法时间复杂度也降低了，变得更加的高效。
二、虚拟DOM VS 直接操作原生DOM？
如果没有 Virtual DOM，简单来说就是直接重置 innerHTML。当只有一行数据发生变化时，它也需要重置整个 innerHTML，这时候显然就造成了大量浪费。
比较innerHTML 和Virtual DOM 的重绘过程如下：
- innerHTML: render html string + 重新创建所有的 DOM 元素
- Virtual DOM: render Virtual DOM + diff + 必要的 DOM 更新
React的性能就远胜于原生DOM操作，DOM 完全不属于Javascript (也不在Javascript 引擎中存在).。Javascript 其实是一个非常独立的引擎，DOM其实是浏览器引出的一组让Javascript操作HTML文档的API而已。在即时编译的时代，调用DOM的开销是很大的。而Virtual DOM的执行完全都在Javascript 引擎中，完全不会有这个开销。
三、虚拟DOM VS MVVM？/ React 和MVVM系框架区别？
- MVVM 系框架的变化检查是数据层面的，而 React 的检查是 DOM 结构层面的。
- 脏检查（Angular）：scope digest + 必要 DOM 更新（任何变动都有固定的 O(watcher count) 的代价）
- 依赖收集（Vue、Avalon）：重新收集依赖 + 必要 DOM 更新（在 js 和 DOM 层面都是 O(change)）
- MVVM 渲染列表的时候，由于每一行都有自己的数据作用域，所以通常每一行有一个对应的 ViewModel 实例，或者是一个稍微轻量一些的利用原型继承的 “scope” 对象，但也有一定的代价。所以，MVVM 列表渲染的初始化几乎一定比 React 慢，因为创建 ViewModel / scope 实例比起 Virtual DOM 来说要昂贵很多。
- 当数据是全新的对象时，假如没有任何复用已经创建了的 ViewModel 实例和 DOM 元素方面的优化，由于数据是 “全新” 的，MVVM 实际上需要销毁之前的所有实例，重新创建所有实例，最后再进行一次渲染！React 的变动检查由于是 DOM 结构层面的，即使是全新的数据，只要最后渲染结果没变，那么就不需要做无用功。因此Angular 和 Vue 都进行了改进，01-提供了列表重绘的优化机制，在数据变化时通过对象的的不会变化的uid来“提醒”原来这份数据对应的实例和 DOM 元素都可以复用，只需要更新变动了的部分，02-通过track by $index 来进行 “原地复用”直接根据在数组里的位置进行复用。
- 不同场景性能比较：
在比较性能的时候，要分清楚初始渲染、小量数据更新、大量数据更新这些不同的场合。Virtual DOM、脏检查 MVVM（Angular）、依赖收集 MVVM（Vue、Avalon） 在不同场合各有不同的表现和不同的优化需求。Virtual DOM 为了提升小量数据更新时的性能，也需要针对性的优化，比如 shouldComponentUpdate 或是 immutable data。
01- 初始渲染：Virtual DOM > 脏检查 >= 依赖收集
02- 小量数据更新：依赖收集 >> Virtual DOM + 优化 > 脏检查（无法优化） > Virtual DOM 无优化
03- 大量数据更新：脏检查 + 优化 >= 依赖收集 + 优化 > Virtual DOM（无法/无需优化）>> MVVM 无优化
四、对React虚拟DOM的误解？
React掩盖了底层的 DOM 操作，可以用更声明式的方式来描述我们目的，从而让代码更容易维护。没有任何框架可以比纯手动的优化 DOM 操作更快，因为框架的 DOM 操作层需要应对任何上层 API 可能产生的操作，它的实现必须是普适的。