回流（Reflow）与重绘（Repaint）：浏览器渲染性能优化核心
一、浏览器渲染流程基础
1、关键渲染路径（Critical Rendering Path）
2、核心概念定义
- 回流（Reflow）： 当元素的尺寸、位置或布局结构发生变化时，浏览器需要重新计算元素几何属性并确定其在页面中的准确位置
- 重绘（Repaint）： 当元素的外观属性（如颜色、背景等）发生变化但不影响布局时，浏览器重新绘制元素的外观
二、回流与重绘的触发条件
1、触发回流的操作
| 操作类型 | 具体示例 |
|---|---|
| 尺寸变化 | width, height, padding,border |
| 位置变化 | top, left, position, float |
| 布局结构变化 | 添加/删除DOM元素，display: none |
| 内容变化 | 文本改变，图片尺寸改变 |
| 视口变化 | 窗口大小调整（resize事件） |
| 获取几何属性 | offsetWidth, getBoundingClientRect() |
2、触发重绘的操作
| 操作类型 | 具体示例 |
|---|---|
| 颜色变化 | color, background-color |
| 背景样式 | background-image, background-position |
| 边框样式 | border-style, border-radius |
| 可见性 | visibility，opacity（不触发回流） |
| 轮廓 | outline, box-shadow（不影响布局时） |
三、性能影响对比
| 特性 | 回流 | 重绘 |
|---|---|---|
| 计算复杂度 | 高（涉及布局计算） | 低（仅外观绘制） |
| 影响范围 | 整个文档或部分子树 | 单个元素或局部区域 |
| 性能开销 | 高（可能触发整个文档重排） | 较低 |
| 触发频率 | 相对较低 | 相对较高 |
| 优化优先级 | 高（优先避免） | 中（适当优化） |
四、回流范围与影响
1、回流范围层级
2、影响范围的因素
- 全局回流： 修改根元素（）或全局样式
- 局部回流： 修改容器元素（影响子元素）
- 最小回流： 修改不影响其他元素的独立元素
五、优化策略与实践
1、减少回流次数（核心策略）
DOM操作优化
// 坏实践：多次单独操作
for (let i = 0; i < 100; i++) {document.body.appendChild(document.createElement('div'));
}// 好实践：使用文档片段
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {fragment.appendChild(document.createElement('div'));
}
document.body.appendChild(fragment);
样式修改优化：
// 坏实践：多次修改样式
element.style.width = '100px';
element.style.height = '200px';
element.style.margin = '10px';// 好实践：使用类名批量修改
element.classList.add('new-styles');// 或使用cssText
element.style.cssText = 'width:100px; height:200px; margin:10px;';
2、避免强制同步布局（布局抖动）
// 坏实践：读写交替导致多次回流
for (let i = 0; i < items.length; i++) {items[i].style.width = (items[i].offsetWidth + 10) + 'px';
}// 好实践：读写分离
const widths = [];
for (let i = 0; i < items.length; i++) {widths.push(items[i].offsetWidth);
}
for (let i = 0; i < items.length; i++) {items[i].style.width = (widths[i] + 10) + 'px';
}
3、使用CSS优化技术
GPU 加速：
.animate-element {transform: translateZ(0); /* 启用GPU加速 */will-change: transform; /* 提示浏览器提前优化 */
}
分离渲染层：
.fixed-header {position: fixed;transform: translateZ(0); /* 创建独立图层 */
}
避免table布局：
<!-- 避免使用 -->
<table><!-- 任何单元格变化都会导致整个表格回流 -->
</table><!-- 推荐使用 -->
<div class="grid-container"><div class="grid-item"></div>
</div>
4、优化布局属性读取
缓存几何属性：
// 坏实践：多次读取
const width = element.offsetWidth;
doSomething();
const height = element.offsetHeight; // 可能触发回流// 好实践：一次读取并缓存
const rect = element.getBoundingClientRect();
const width = rect.width;
const height = rect.height;
doSomething(width, height);
5、现代布局方案
Flexbox vs Grid：
/* Flexbox布局 */
.container {display: flex;flex-wrap: wrap;
}/* Grid布局 */
.container {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
性能对比：
- Flexbox： 适合一维布局，回流影响局部
- Grid： 适合二维布局，回流影响整个网格
六、性能指标参考值
| 操作类型 | 合理耗时 | 警告阈值 | 危险阈值 |
|---|---|---|---|
| 样式计算 | < 3ms | 5ms | > 10ms |
| 布局/回流 | < 1ms | 3ms | > 6ms |
| 绘制/重绘 | < 2ms | 4ms | > 8ms |
| 总渲染时间 | < 10ms | 16ms | > 30ms |
七、回流与重绘优化总结
1、核心原则：
- 减少回流次数 > 减少重绘次数
- 批量操作 > 分散操作
- GPU加速 > CPU渲染
2、黄金法则：
3、现代解决方案：
- 使用CSS Containment隔离变化
- 采用CSS Grid/Flexbox布局
- 使用Content Visibility API
.large-section {content-visibility: auto;contain-intrinsic-size: 1000px;
}
4、持续监控：
- 使用Lighthouse定期检测
- 监控Cumulative Layout Shift（CLS）
- 设置性能预算