回流（Reflow）与重绘（Repaint）：浏览器渲染性能优化核心

一、浏览器渲染流程基础

1、关键渲染路径（Critical Rendering Path）

2、核心概念定义

• 回流（Reflow）： 当元素的尺寸、位置或布局结构发生变化时，浏览器需要重新计算元素几何属性并确定其在页面中的准确位置
• 重绘（Repaint）： 当元素的外观属性（如颜色、背景等）发生变化但不影响布局时，浏览器重新绘制元素的外观

二、回流与重绘的触发条件

1、触发回流的操作

2、触发重绘的操作

三、性能影响对比

四、回流范围与影响

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： 适合二维布局，回流影响整个网格

六、性能指标参考值

七、回流与重绘优化总结

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）
• 设置性能预算