在现代 Web 开发中，页面渲染性能直接影响用户体验。而“回流”（Reflow）与“重绘”（Repaint）是浏览器渲染流程中的两个关键环节，也是前端性能优化的重点关注对象。理解它们的触发机制及优化策略，对构建高性能网页至关重要。
回流与重绘的基本概念
回流（Reflow），也称为“重排”，是指当 DOM 结构或元素几何属性（如宽度、高度、位置等）发生变化时，浏览器需要重新计算元素在页面中的布局，并更新整个或部分渲染树的过程。这个过程涉及大量计算，开销较大。
重绘（Repaint）则是在元素外观（如颜色、背景、边框样式等）发生变化，但不改变其几何尺寸或位置时，浏览器仅需重新绘制该元素的视觉表现，而不必重新计算布局。虽然比重流轻量，但频繁发生仍会影响性能。
需要注意的是：所有回流都会触发重绘，但重绘不一定引发回流。例如修改 color 通常只触发重绘，而修改 width 则会同时触发回流和重绘。
常见触发回流与重绘的场景
触发回流的操作包括：
- 修改 DOM 元素的几何属性，如
width、height、padding、margin、border等； - 改变元素的位置（如
top、left、transform中非合成属性的部分）； - 添加或删除可见的 DOM 节点；
- 用户操作，如调整窗口大小、滚动页面、改变字体大小；
- 读取某些布局相关属性（如
offsetWidth、clientHeight、getComputedStyle()）会强制浏览器执行“同步回流”，以返回最新值； - 使用 JavaScript 动态修改样式表或插入
<style>标签。
触发重绘但不触发回流的操作包括：
- 修改
color、background-color、visibility（注意：visibility: hidden不触发回流，但display: none会）； - 改变
box-shadow、outline等不影响布局的视觉属性； - 使用 CSS 动画改变非几何属性（前提是未触发布局变化）。
值得注意的是，现代浏览器已具备一定的优化能力，例如将多个连续的 DOM 操作合并为一次回流（称为“批处理”）。但若在循环中频繁读写布局属性，仍可能打断这种优化，导致性能下降。
减少回流与重绘的有效策略
避免频繁读写布局属性
在 JavaScript 中，连续读取和修改布局属性容易触发多次同步回流。例如：
// 反面示例：每次读取 offsetHeight 都可能触发回流
for (let i = 0; i < 100; i++) {
el.style.width = el.offsetWidth + 10 + 'px';
}
应先缓存布局值，再统一修改：
// 推荐做法
const width = el.offsetWidth;
for (let i = 0; i < 100; i++) {
el.style.width = width + 10 + 'px';
}
使用 CSS 类批量修改样式
直接通过 element.style.xxx = ... 修改多个样式属性，可能多次触发布局计算。更高效的方式是预先定义 CSS 类，通过切换类名一次性应用所有变更：
.updated-style {
width: 200px;
height: 100px;
background: #f0f0f0;
}
el.classList.add('updated-style');
这种方式让浏览器有机会将样式变更合并处理，减少不必要的中间状态计算。
利用离屏渲染（Offscreen Rendering）
对于需要频繁更新但不影响主文档流的元素（如动画容器），可将其移出正常文档流，避免影响其他元素布局。常用方法包括：
- 使用
position: absolute或fixed将元素脱离文档流； - 将复杂子树包裹在
transform: translateZ(0)或will-change: transform的容器中，促使其提升为独立图层（Layer），利用 GPU 合成而非 CPU 布局。
合理使用 transform 和 opacity
现代浏览器对 transform 和 opacity 的动画支持硬件加速，且不会触发回流或重绘（仅触发合成 Compositing）。因此，在实现位移、缩放、淡入淡出等效果时，优先使用这两个属性：
.animated {
transform: translateX(100px);
opacity: 0.8;
transition: transform 0.3s, opacity 0.3s;
}
避免内联样式动态拼接
动态拼接 style 字符串（如 el.style.cssText += '...'）可能导致浏览器无法有效缓存样式规则，增加解析负担。建议通过类名控制或使用 CSS-in-JS 库（如 Emotion、styled-components）进行声明式管理。
使用 DocumentFragment 批量操作 DOM
当需要插入多个子节点时，先在内存中构建 DocumentFragment，再一次性插入 DOM，可显著减少回流次数：
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const li = document.createElement('li');
li.textContent = 'Item ' + i;
fragment.appendChild(li);
}
list.appendChild(fragment); // 仅触发一次回流
实际开发中的权衡与注意事项
虽然减少回流和重绘是性能优化的重要方向，但并非所有场景都需要极致优化。对于静态内容或低频交互页面，过度优化反而增加代码复杂度。应结合 Chrome DevTools 的 Performance 面板进行真实性能分析，定位瓶颈后再针对性优化。
此外，不同浏览器引擎（如 Blink、WebKit、Gecko）对回流/重绘的实现细节略有差异，测试时应覆盖主流环境。尤其在移动端，GPU 资源有限，盲目创建过多合成层反而可能导致内存压力增大，需谨慎使用 will-change 等提示属性。
