回流 与 重绘
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 条评论
回复 删除
下一页