CSS 重排与重绘详解

在浏览器渲染页面的过程中，重排（Reflow）和重绘（Repaint）是两个核心概念，直接影响页面性能。理解它们的触发机制和优化方法，是前端性能优化的重要基础。

一、基本概念

1. 重排（Reflow）

重排又称回流，指当 DOM 元素的几何属性发生变化（如尺寸、位置、数量等）时，浏览器需要重新计算元素的几何位置和大小，并重新构建渲染树的过程。这是一个计算密集型操作，因为浏览器需要遍历 DOM 树，更新元素的布局信息，甚至可能触发父元素和子元素的连锁反应。例如：

• 改变元素的width、height、margin、padding
• 调整元素的top、left、position（从static改为absolute等）
• 增减 DOM 元素（如appendChild、removeChild）
• 窗口大小改变（resize事件）

2. 重绘（Repaint）

重绘指当元素的非几何属性发生变化（如颜色、背景、透明度等）时，浏览器无需重新计算布局，只需重新绘制元素外观的过程。重绘不会改变元素的布局，因此性能消耗比重排小，但频繁重绘仍会影响性能。例如：

• 改变color、background-color
• 调整border-color、box-shadow
• 设置visibility: hidden（元素仍占据空间，仅视觉隐藏）

二、触发机制与关联

重排和重绘的触发存在明确关联：重排必然导致重绘：当元素布局改变后，其外观也需要重新绘制。重绘不一定触发重排：仅改变非几何属性时，只需重绘即可。

浏览器为了优化性能，会维护一个重排队列，将短时间内的多次重排操作合并为一次执行。但某些操作会强制浏览器立即执行队列中的重排（如获取布局信息），导致优化失