前端性能优化必知：理解回流与重绘，让页面丝滑如德芙
引言
在前端开发中，我们常遇到页面卡顿、加载缓慢的问题。除了网络延迟和资源体积，浏览器渲染过程中的『回流（Reflow）』与『重绘（Repaint）』也是关键性能瓶颈。深入解析这两个概念，并给出实用的优化策略。
一、从渲染流程看回流与重绘
要理解回流和重绘，首先需要明确浏览器是如何将HTML/CSS转化为可视化页面的。渲染流程大致分为以下步骤：
- 构建DOM树 ：浏览器解析HTML字节流（需注意编码通常为UTF-8），生成节点对象组成的DOM树。
- 构建CSSOM树 ：解析CSS文件（同样需处理编码），生成包含样式规则的CSSOM树。
- 合并渲染树（Render Tree） ：将DOM树与CSSOM树结合，生成仅包含可见元素的渲染树（隐藏元素如 display:none 不参与）。
- 布局（Layout） ：计算每个元素的几何属性（宽高、位置），生成布局树（Layout Tree）。
- 绘制（Paint） ：将布局树中的元素填充颜色、阴影等视觉属性，生成图层。
- 合成（Composite） ：将多个图层合并为最终屏幕上的像素。 回流 发生在布局阶段，当元素的尺寸、位置或结构变化时，浏览器需要重新计算布局； 重绘 发生在绘制阶段，当元素的视觉属性（如颜色、背景）变化但布局未变时，浏览器仅需重新绘制。
二、触发回流的8大场景：为什么getBoundingClientRect()会被重点提及？
触发回流的常见操作包括：
- 页面首次渲染 ：从无到有的布局计算，是最耗时的回流。
- 窗口大小变化 ：视口尺寸改变会影响所有元素的布局。
- 元素尺寸/位置修改 ：如 width 、 margin 、 top 等属性的变更（注意： transform 通过GPU加速，通常不触发回流）。
- 内容变化 ：如文本长度增加、 appendChild 添加节点。
- 显隐切换 ： display:none 与 display:block 的切换（ visibility:hidden 仅触发重绘）。
- 字体大小修改 ：文字尺寸变化会影响行高和布局。
- 激活CSS伪类 ：如 :hover （部分属性会触发回流）。
- 查询布局属性 ：重点来了！当调用 getBoundingClientRect() 、 offsetHeight 等方法时，浏览器为了返回最新值，会强制触发一次回流。
为什么getBoundingClientRect()是性能杀手？
getBoundingClientRect() 用于获取元素在视口中的位置和尺寸（返回包含 top 、 bottom 、 width 等属性的对象）。但它的“副作用”是：浏览器为了确保返回值的准确性，会强制刷新之前所有未执行的布局操作，导致回流被提前触发。
例如，以下代码会触发多次回流：
三、重绘：比回流轻量，但仍需关注
重绘的触发条件更简单： 元素的视觉属性变化但布局未变 。例如：
- 修改 color 、 background-color 、 box-shadow ；
- visibility: hidden 与 visibility: visible 的切换（不影响布局）。 虽然重绘的成本低于回流，但频繁重绘（如动画中的背景色闪烁）仍会导致页面卡顿。
四、性能优化：如何减少回流与重绘？
根据提示和前端最佳实践，优化策略可分为“预防”和“规避”两类：
1. 预防回流：从代码设计源头减少触发
- 避免使用 table 布局 ： table 的局部修改会触发整个表格的回流（“一荣俱荣，一损俱损”），推荐用 flex 或 grid 替代。
- 批量修改样式 ：将多次样式修改合并为一次（如先 display:none 修改，再 display:block 显示）。
- 使用 transform 替代布局属性 ： transform 通过GPU处理，不触发回流（如用 transform: translate(10px, 10px) 替代 left: 10px ）。
- 避免频繁查询布局属性 ：将 getBoundingClientRect() 等方法的结果缓存，减少强制回流次数。
2. 规避影响：利用浏览器特性降低成本
- 分离图层 ：通过 will-change: transform 或 translate3d(0,0,0) 强制元素生成独立图层（如动画元素），避免影响主文档流的回流。
- 使用 requestAnimationFrame ：将布局操作集中到浏览器的重绘周期中，减少不必要的回流。
- 隐藏不可见元素 ：对暂时不需要显示的元素使用 display:none （完全脱离渲染树），而非 visibility:hidden （仍占布局空间）。
五、总结
回流与重绘是前端性能优化的核心课题。通过理解渲染流程、触发条件和优化策略，我们可以写出更高效的代码。下次遇到页面卡顿，不妨打开浏览器的“Performance”面板，观察是否有大量回流事件——这可能就是优化的突破口！
