回流 与 重绘
2019-12-24 22:12:43 8 举报AI智能生成
浏览器的回流与重绘
作者其他创作
大纲/内容
浏览器的渲染过程
渲染树的生成（Render Tree）
渲染树只包含可见的节点
回流
构造渲染树之后，还需要计算他们在设备视口（viewport）内的确切位置和大小，这个计算的阶段就是回流
重绘
有了渲染树以及节点的具体位置信息，此时我们可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段叫做重绘节点
何时发生回流
略
注意：回流一定会触发重绘，而重绘不一定会回流
浏览器的优化机制
由于每次回流都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化回流过程。浏览器会将修改操作放入队列里，直到过了一段时间或者操作达到一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问一下属性或者使用以下方法：
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect
以上属性和方法都需要返回新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值
减少回流重绘的方法
避免触发同步布局事件
优化前
优化后
对于动画效果，使用绝对定位使其脱离文档流
CSS3硬件加速（GPU加速）
对于CSS3硬件加速，可以让transform、opacity、filters、Will-change这些动画不会引起回流重绘
对于动画的其他属性，如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能
0 条评论
下一页
