virtual DOM是如何优化性能的

内容简介：virtual DOM是如何操作的首先有一个数据结构和DOM结构相似的对象，然后用这个对象去渲染真正的DOM树。当状态发生改变时，新生成一个对象和原来的对象比较，发现有不同的地方，就将改变的地方替换掉相对应的原来的对象的地方。两种渲染的比较

浏览器接收到html文件，并转换成DOM树。如果有css还会生成css树。如果遇到script标签，会先判断是async或defer。如果是前者会并行下载并执行js，后者会先下载，等html解析完后顺序执行。
当构建后dom树和css树后，开始构建render树。这一步就是确定页面布局和样式，在生成render树的过程中浏览器就开始绘制合成图层将内容显示在屏幕。
只要dom一更新，以上流程浏览器就会再执行一次。

回想一下，这样的场景是不是常常见到。一个列表中有许多条数据，需要提供一个按钮来控制数据的排序；一个按钮删除，一个按钮新增甚至还有编辑数据。当没有任何的框架的时候，就需要我们手动的修改DOM结构。给按钮增加监听事件和回调函数更新DOM。功能越复杂，需要增加的事件和维护的代码就会越来越多，项目也会越来越臃肿。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

关注我们，获取更多IT资讯^_^

查看所有标签

• 性能优化第一课：性能指标
• 【前端性能优化】vue性能优化
• Golang 性能测试 (2) 性能分析
• 【前端性能优化】02--vue性能优化
• Java性能 -- 性能调优标准
• Java性能 -- 性能调优策略

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。