A-A+

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

2020年02月25日 React js 评论 1 条

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

虚拟dom与真实dom有什么区别

虚拟dom 真实dom
更新得更快 更新较慢
不能直接更新html 可以直接更新html
dom更新无需创建新的dom 如果dom更新,那么就创建一个新dom
dom操作非常便利 dom操作非常昂贵
内存无浪费 内存浪费严重

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

真实dom操作带来的问题

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

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

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

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

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

1 条留言  访客:1 条  博主:0 条

  1. 违章代办

    原来如痴

给我留言

Copyright © 前端面试题 保留所有权利.   Theme  Ality 桂ICP备17012235号-1

用户登录