回流&重绘
2024-09-07 12:17:21
浏览器加载解析页面：把HTML解析为DOM树，解析CSS生成CSSOM树，HTML DOM树和CSSOM树组合构建render树，首次触发回流和重绘后将页面结构信息发送给GPU进行绘制渲染。
回流：当元素尺寸、布局、显隐等发生变化，及其他影响了DOM树结构的变化会触发DOM树的重新构建称为回流，当树完成回流后浏览器会将回流后的内容重绘在屏幕中。
重绘：当元素更新属性eg:color、background-color等等，但这些属性只影响元素的外观风格，不影响结构布局时称为重绘。
回流一定会触发重绘，但重绘不一定触发回流。回流的性能消耗大于重绘。
浏览器自身优化性能：浏览器会维护一个队列，将回流重绘操作放入队列，等队列中的操作到一定数量或一定时间时或者我们通过代码访问最新的布局信息时浏览器会执行这个队列，对回流重绘批处理，避免了回流重绘的频繁性影响性能。
作为网页性能优化，应该尽可能减少回流和重绘：
代码中改变元素样式的多个属性时：
el.style.padding = '10px';el.style.borderWidth = '2px';
虽然浏览器会把两次回流合并为一次，但确实引起了两次回流，可以将多次的修改处理合并为一次，减少回流次数
el.style.cssText += 'padding: 10px;border-width: 2px;'
元素脱离文档流使这些元素的修改不会引发回流重绘，因为它们已经脱离了渲染树独立一层存在。
CSS3中通过transform: scale、translate等动画或opacity、filter等操作元素不会引起回流重绘，属于CSS3的硬件加速，对于CSS3的其它操作也能最大化的提升回流重绘的性能
最新文章
- NO.3 CAS配置问题汇总
- 设计模式之美：Memento（备忘录）
- mvc_ajax_for form
- mevan引入容联云通讯jar
- Mono for Andriod学习与实践（1）— 初体验
- Moq 测试 属性，常用方法
- C++builder编译别人工程报错
- WOW.js – 让页面滚动更有趣
- EntityFramework Code-First—领域类配置之DataAnnotations
- 帝国cms中当调用当前信息不足时，继续取其他数据
- C# 读取 appconfig文件配置数据库连接字符串，和配置文件
- superset在 centos 7安装运行
- linux命令中的参数前的一横（-）和两横（--）的区别
- IO流（5）—缓冲流
- android -------- 混淆打包报错(warning - InnerClass annotations are missing corresponding EnclosingMember annotations)
- 20个令人惊叹的深度学习应用（Demo+Paper+Code）
- Android Binder分析二：Natvie Service的注冊
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
- Java类型Float&&Double
- 微信小程序5.2.2版本，找不着resource下exml皮肤