什么是虚拟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不会进行重排与重绘操做；

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

三、虚拟DOM有效下降大面积（真实DOM节点）的重排和重绘，由于最终与真实DOM比较差别，能够局部渲染。