虚拟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的区别?
1、虚拟DOM不会进行重排与重绘操作;
2、虚拟DOM进行频繁修改,然后一次性比较并修改真实DOM中需要修改的部分,最后进行重排和重绘,减少过多DOM节点重排和重绘损耗。
3、虚拟DOM有效降低大面积(真实DOM节点)的重排和重绘,因为最终与真实DOM比较差异,可以局部渲染。