重绘(Repaint)与重排(Reflow)
重绘(Repaint)与重排(Reflow)的区别
重绘和重排是浏览器渲染过程中的两个重要概念，它们对网页性能有显著影响。
重排(Reflow，也称回流)
定义：
当DOM的变化影响了元素的几何属性（如宽度、高度、位置等），浏览器需要重新计算元素的几何属性，并重新构建渲染树，这个过程称为重排。
触发条件：
添加或删除可见的DOM元素
元素位置、尺寸改变（width, height, margin, padding, border等）
内容变化（如文本改变或图片大小改变）
页面初始渲染
浏览器窗口大小改变（resize事件）
计算offsetWidth、offsetHeight等布局信息
性能影响：
重排代价很高，会导致渲染树的部分或全部重新计算
可能触发子元素和后续元素的重排
是导致DOM操作性能问题的主因
重绘(Repaint)
定义：
当元素的外观样式改变但不影响布局时（如颜色、visibility、outline等），浏览器只需重新绘制受影响的部分，这个过程称为重绘。
触发条件：
颜色变化（color, background-color等）
边框样式变化（border-style, outline等）
可见性变化（visibility）
背景图变化（background-image）
文本阴影或盒阴影变化（text-shadow, box-shadow）
性能影响：
比重排代价低，因为不需要计算布局
频繁重绘仍会影响性能，特别是在动画中
关键区别
| 特性 | 重排(Reflow) | 重绘(Repaint) |
|---|---|---|
| 触发原因 | 布局/几何属性改变 | 外观样式改变但不影响布局 |
| 性能消耗 | 高（涉及布局计算） | 较低（仅重新绘制） |
| 影响范围 | 可能影响DOM子树或整个渲染树 | 仅影响当前元素 |
| 必然关系 | 重排必定引起重绘 | 重绘不一定引起重排 |
优化建议
减少重排：
避免频繁操作样式，最好一次性更改（使用class而非直接修改style）
使用文档片段(documentFragment)进行批量DOM操作
对复杂动画元素使用
position: absolute/fixed脱离文档流避免频繁读取会触发重排的属性（如offsetTop等），如需读取可先缓存
减少重绘：
使用CSS3的transform和opacity属性实现动画（可触发GPU加速）
合理使用
will-change属性提示浏览器优化避免使用过多box-shadow等高消耗样式
现代API：
使用
requestAnimationFrame替代setTimeout/setInterval进行动画使用CSS Containment属性限制重排影响范围
理解重绘和重排的区别有助于开发者编写更高性能的网页代码，特别是在处理动态内容和动画时。