什么是虚拟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比较差异,可以局部渲染。

posted @ 2019-03-28 13:53  安xiao曦  阅读(3631)  评论(1编辑  收藏  举报