什么是虚拟DOM

虚拟DOM就是用JS来模拟DOM结构。

为什么要虚拟DOM？

　　当用传统的api或jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。比如当你在一次操作时，需要更新10个DOM节点，理想状态是一次性构建完成DOM树，再执行后续操作。但是浏览器没有那么智能，在收到第一个更新DOM请求后，并不知道后续还有9次更新操作，因此会马上执行流程，最终执行10次流程，显然前面几次都是白白浪费性能。而且操作DOM的代价是很昂贵的，频繁操作可能会出现页面卡顿，影响用户的体验。

　　虚拟DOM就是为了解决这个浏览器性能问题而被设计出来的，如果一次操作中有10次更新DOM的操作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存在本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，通知浏览器去执行绘制工作，这样可以避免大量的无谓的计算量。

 

在实际代码中，会对新旧两棵树进行一个深度的遍历，每个节点都会有一个标记。每遍历到一个节点，就把该节点和新的树进行对比，如果有差异就记录到一个对象中。然后映射到真是DOM。 

 

 

虚拟DOM与真实DOM的区别？

1、虚拟DOM不会进行重排与重绘操作；

2、虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要修改的部分，最后进行重排和重绘，减少过多DOM节点重排和重绘损耗。

3、虚拟DOM有效降低大面积（真实DOM节点）的重排和重绘，因为最终与真实DOM比较差异，可以局部渲染。