react.js中的虚拟dom与真实dom有什么区别?为什么说虚拟dom比较快? 您所在的位置:网站首页 什么是虚拟真实 react.js中的虚拟dom与真实dom有什么区别?为什么说虚拟dom比较快?

react.js中的虚拟dom与真实dom有什么区别?为什么说虚拟dom比较快?

2024-07-08 20:58| 来源: 网络整理| 查看: 265

react.js在我们现在的前端开发应用非常广泛,而在前端面试中也常有这样的题目:虚拟dom与真实dom有什么区别?如果你很快答上来它们之间的区别,那么下一个问题就是:为什么说虚拟dom比较快? 好的,就算你知道了它内部的差异运算,那为什么它就比较快呢?我们一一来分析一下。

虚拟dom与真实dom有什么区别 虚拟dom真实dom更新的更快更新的较慢不能直接更新html可以直接更新htmldom操作非常便利dom操作非常昂贵内存无浪费内存浪费严重

以上就是虚拟dom与真实dom的比较与区别,可以看出来,采用虚拟dom的方式,可以大大提升渲染的效率。那么,通过上面的对比,我们得出了结论,但是,我们再深入一步理解:为什么操作真实的dom是昂贵的?

真实dom操作带来的问题

更改虚拟DOM与更改真实DOM应该没有太大的不同。

问题出现在结果中:操作真实DOM中,会触发页面的回流与重绘, 而这两个东西是非常耗费性能的。因此我们越少操作真实dom就越好。

模板渲染的一种方法是,把需要渲染的模板计算好,然后用渲染好的模板替换整个容器元素。这需要重新计算容器中出现的所有内容,以及受其影响的所有内容。所以想像一个,假设你的浏览器是你的厨房,你只是买了个柠檬回了,但浏览器把你把有的东西全部扔掉,然后再弄一批一样的回来,而只是因为新的这批货里带了一个柠檬?你会疯掉的。

事实上,react.js和很多其它的js框架一样,都是通过计算最小变化量进行替换。

值得注意的是,虚拟dom并没有比getElementById这样的方式来得更快,如果仅仅是一个元素,那么后者还是最快的,但是,当我们需要同时更新大量数据的时候,虚拟dom就是一个更快的选择了。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有