你不知道的《回流与重绘》那些事儿

1.回流（Reflow）

        回流是指当网页中的元素的布局发生变化时，浏览器需要重新计算元素的位置和大小。任何影响页面布局的操作，比如改变元素的尺寸、位置、隐藏/显示元素，或者调整字体大小、窗口尺寸等，都会触发回流。

回流的开销比较大，因为它会导致页面的重新布局，影响整个页面甚至是整个文档的渲染。

触发回流的操作包括：

• 改变窗口的大小。
• 修改元素的宽高、边距（margin）、填充（padding）、边框（border）等样式属性。
• 添加或删除 DOM 元素。
• 改变元素的字体大小或文本内容。
• 设置 display: none（隐藏元素，触发回流）。

2.重绘（Repaint） 

重绘是指当元素的外观（比如颜色、背景、边框等）发生变化时，浏览器会重新绘制这些元素。相比回流，重绘的开销相对较小，因为它不涉及元素的布局重新计算，只需更新外观。

触发重绘的操作包括：

• 改变元素的颜色（比如 color、background-color）。
• 改变元素的透明度（比如 opacity）。
• 改变元素的边框颜色。

3.总结

回流的重点在于“流”，倾向于结构的调整，对于性能影响更大。

重绘的重点在于“绘”，倾向于样式的调整，对于性能影响较小。

回流一定会触发重绘，而重绘不一定会回流。

 

4.性能优化建议：

• 避免频繁操作 DOM，可以通过批量更新 DOM，或使用 DocumentFragment 进行 DOM 操作。
• 减少回流的触发，例如在改变样式时尽量避免逐一更改每个属性，可以使用 class 一次性改变多个样式属性。
• 使用 CSS3 动画，它们通常不触发回流或重绘，性能会更好。