首页 > 其他 > 详细

虚拟dom和real dom区别

时间:2021-08-20 09:18:31      阅读:44      评论:0      收藏:0      [点我收藏+]

Real DOM,真实DOM, 意思为文档对象模型,是一个结构化文本的抽象,在页面渲染出的每一个结点都是一个真实DOM结构,

Virtual Dom,本质上是以 JavaScript 对象形式存在的对 DOM 的描述。

区别:

  1. 虚拟DOM不会进行排版与重绘操作

  2. 虚拟DOM进行频繁修改,然后一次性比较并修改真实DOM中需要改的部分(注意!),最后并在真实DOM中进行排版与重绘,减少过多DOM节点排版与重绘损耗

  3. 真实DOM频繁排版与重绘的效率是相当低的

  4. 虚拟DOM有效降低大面积(真实DOM节点)的重绘与排版,因为最终与真实DOM比较差异,可以只渲染局部(同2)

使用虚拟DOM的损耗计算:

总损耗 = 虚拟DOM增删改 + (与Diff算法效率有关)真实DOM差异增删改 + (较少的节点)排版与重绘

直接使用真实DOM的损耗计算:

总损耗 = 真实DOM完全增删改 + (可能较多的节点)排版与重绘

 

优缺点

真实DOM的

  优势:易用

  缺点:

         效率低,解析速度慢,内存占用量过高

         性能差:频繁操作真实DOM,易于导致重绘与回流

使用虚拟DOM的

 优势如下:

    简单方便:如果使用手动操作真实DOM来完成页面,繁琐又容易出错,在大规模应用下维护起来也很困难

   性能方面:使用Virtual DOM,能够有效避免真实DOM数频繁更新,减少多次引起重绘与回流,提高性能

    跨平台:React借助虚拟DOM, 带来了跨平台的能力,一套代码多端运行

  缺点:

   在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化

  首次渲染大量DOM时,由于多了一层虚拟DOM的计算,速度比正常稍慢

总之,一切为了减弱频繁的大面积重绘引发的性能问题,不同框架不一定需要虚拟DOM,关键看框架是否频繁会引发大面积的DOM操作

虚拟dom和real dom区别

原文:https://www.cnblogs.com/ygunoil/p/15164210.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!