回流&重绘

Posted 2021-06-15 IT小猿人

浏览器加载解析页面：把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的其它操作也能最大化的提升回流重绘的性能