virtual DOM是如何优化性能的
栏目: JavaScript · 发布时间: 4年前
内容简介：virtual DOM是如何操作的首先有一个数据结构和DOM结构相似的对象，然后用这个对象去渲染真正的DOM树。当状态发生改变时，新生成一个对象和原来的对象比较，发现有不同的地方，就将改变的地方替换掉相对应的原来的对象的地方。两种渲染的比较
谈到virtual DOM 前先来说说浏览器渲染的流程
浏览器接收到html文件，并转换成DOM树。如果有css还会生成css树。如果遇到script标签，会先判断是async或defer。如果是前者会并行下载并执行js，后者会先下载，等html解析完后顺序执行。 当构建后dom树和css树后，开始构建render树。这一步就是确定页面布局和样式，在生成render树的过程中浏览器就开始绘制合成图层将内容显示在屏幕。 只要dom一更新，以上流程浏览器就会再执行一次。
当数据开始变化时，如何手动操作DOM？
回想一下，这样的场景是不是常常见到。一个列表中有许多条数据，需要提供一个按钮来控制数据的排序；一个按钮删除，一个按钮新增甚至还有编辑数据。当没有任何的框架的时候，就需要我们手动的修改DOM结构。给按钮增加监听事件和回调函数更新DOM。功能越复杂，需要增加的事件和维护的代码就会越来越多，项目也会越来越臃肿。
virtual DOM是如何操作的
首先有一个数据结构和DOM结构相似的对象，然后用这个对象去渲染真正的DOM树。当状态发生改变时，新生成一个对象和原来的对象比较，发现有不同的地方，就将改变的地方替换掉相对应的原来的对象的地方。
两种渲染的比较
为什么通过virtual DOM会提高性能呢？
要知道每一次修改DOM都会触发浏览器的重新渲染的流程。
假设有一个页面数据庞大，需要修改1000条数据，
直接操作DOM 相当于1000浏览器重新渲染
然而使用虚拟DOM是先js层面了计算了1000次，计算好后在访问一次DOM
在js层面的计算和直接访问DOM操作相比，简直便宜得不行。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 性能优化第一课：性能指标
- 【前端性能优化】vue性能优化
- Golang 性能测试 (2) 性能分析
- 【前端性能优化】02--vue性能优化
- Java性能 -- 性能调优标准
- Java性能 -- 性能调优策略
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
