当前栏目
什么是虚拟DOM?
虚拟DOM就是用JS来模拟DOM结构的,它并不是真正的DOM。
为什么使用虚拟DOM?
用传统的方式去操作DOM的时候,浏览器会从构建DOM树开始,从头到尾执行一遍流程。简单来说,就是会触发重排与重绘。
比如说,在一次操作中,需要更新10个DOM节点。
理想是一次性构建完成DOM树,但是浏览器并不会那么智能,在收到第一个更新DOM请求之后,并不知道后续还会有9次更新操作,最终执行10次。
很显然,这样子操作DOM的代价十分昂贵,性能开销大。
虚拟DOM的出现解决了这个问题。
如果一次操作中有10次更新DOM的操作,那么不会立即操作真实DOM,而是将这10次更新的diff内容保存在本地的一个js对象中,最终将这个js对象一次性attach到DOM树上。
为什么操作真实DOM的开销大?
其实并不是查询dom树性能开销大。
而是dom树的实现模块和js模块是分开的,这些跨模块的通讯增加了成本,以及dom操作引起了页面重绘重排,使得性能开销巨大。
因为PC的计算能力强大,原本在PC端是没有性能问题的。
但是随着移动端的发展,越来越多的页面需要在智能手机上运行展示,而手机的性能参差不齐,会出现性能问题。
前端框架如何解决性能问题?
Angular,React,Vue等这些前端框架,他们的思路是每次更新dom都尽量避免刷新整个页面,而是针对性的去刷新那被更改的一部分,来释放被无效渲染占用的gpu、cpu性能。
Angular
采用的机制是 脏值检测查机制,所有使用了 ng 指令的 scope data 和 {{}} 语法的 scope data 都会被加入脏检测的队列。
React
通过虚拟 dom 和 setState 更改 data 生成新的虚拟 dom 以及 diff 算法来计算和生成需要替换的 dom 做到局部更新的。
Vue
用的是虚拟 dom,通过重写 setter 、getter 来实现观察者监听 data 属性的变化生成新的虚拟 dom,通过 h 函数创建真实 dom 替换掉dom树上对应的旧 dom。
h函数就是vue中的createElement方法,这个函数的作用就是创建虚拟dom,追踪dom变化。
虚拟DOM和真实DOM的区别
- 1、虚拟DOM不会触发重排与重绘,真实DOM会触发重排(不一定)与重绘。
- 2、虚拟DOM 可以进行频繁的修改,可以有效降低大面积操作真实DOM引起的重排与重绘。真实DOM频繁排版与重绘的效率是相当低的。
- 3、虚拟DOM通过diff算法最终与真实DOM比较差异,可以只渲染局部。
学习参考:
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件