#深入理解浏览器渲染机制：重排（Reflow）与重绘（Repaint）

在现代前端开发中，性能优化是构建高质量 Web 应用的核心课题之一。而浏览器的渲染机制 ，特别是 重排（Reflow） 和 重绘（Repaint），是影响页面性能的关键因素。

理解这两者的区别、触发条件以及优化策略，不仅能帮助我们写出更高效的代码，还能显著提升用户体验。

---

一、浏览器渲染流程简述

在深入重排与重绘之前，我们需要先了解浏览器是如何将 HTML、CSS 和 JavaScript 转换为用户可见的页面的。整个过程大致分为以下几个步骤：

1. 解析 HTML 构建 DOM 树
2. 解析 CSS 构建 CSSOM 树
3. 合并 DOM 和 CSSOM 形成渲染树（Render Tree）
4. 布局（Layout）------ 计算元素几何位置（重排）
5. 绘制（Painting）------ 像素填充（重绘）
6. 合成（Compositing）------ 分层合成最终图像

其中，重排 对应第 4 步（Layout），重绘对应第 5 步（Painting）。

---

二、什么是重排（Reflow）？

定义

重排（Reflow） 是指浏览器重新计算页面中元素的几何尺寸和位置，并重新构建渲染树的过程。它是一个高开销的操作，因为它通常会触发整个页面或部分子树的布局更新。

触发重排的常见操作

以下任何改变元素几何属性的行为都会触发重排：

• 添加、删除、修改 DOM 元素
• 改变元素的尺寸、位置（如 width, height, top, margin 等）
• 改变字体大小（font-size）
• 内容变化（如文本改变、图片加载完成）
• 调用强制布局 API，如：
  • offsetTop, offsetLeft, offsetWidth, offsetHeight
  • scrollTop, scrollLeft, clientWidth, clientHeight
  • getComputedStyle(), getBoundingClientRect()

⚠️ 注意：这些"读取"属性的操作会强制浏览器同步刷新渲染队列，导致重排提前发生。

---

三、什么是重绘（Repaint）？

定义

重绘（Repaint） 是指当元素的外观（如颜色、背景、可见性）发生变化，但不改变其几何属性时，浏览器重新绘制该元素的过程。

重绘的开销比重排小，但仍会影响性能，尤其是当涉及大面积区域时。

触发重绘的常见操作

• 更改颜色：color, background-color, border-color
• 更改可见性：visibility: hidden
• 更改 outline、box-shadow
• opacity 变化（但注意：若使用 transform 配合 opacity，可触发 GPU 加速，避免重绘）

---

四、重排 vs 重绘：性能影响对比

特性	重排（Reflow）	重绘（Repaint）
是否改变布局	✅ 是	❌ 否
是否改变几何属性	✅ 是	❌ 否
性能开销	⚠️ 高（涉及计算与布局）	🟡 中等（仅像素绘制）
是否触发重绘	✅ 重排必然触发重绘	❌ 不一定触发重排

✅ 结论：重排的性能代价远高于重绘。

---

五、浏览器的优化机制

浏览器为了提升性能，会对重排和重绘进行优化：

• 异步处理 ：浏览器会将多个 DOM 修改操作批量处理，避免频繁重排。
• 渲染队列：浏览器会维护一个"渲染队列"，将重排和重绘任务缓存，等到合适的时机统一执行。

但当你强制读取布局信息 时（如 offsetWidth），浏览器会立即清空队列并执行重排，以确保返回正确的值------这就是所谓的"强制同步重排（Forced Synchronous Layout）"。

示例：危险的循环重排

// ❌ 错误做法：每次循环都触发重排
for (let i = 0; i < items.length; i++) {
  items[i].style.width = container.offsetWidth + 'px'; // 每次读取都触发重排
}

// ✅ 正确做法：先读取，再批量写入
const width = container.offsetWidth;
for (let i = 0; i < items.length; i++) {
  items[i].style.width = width + 'px';
}

---

六、如何减少重排与重绘？

1. 批量修改 DOM

将多次 DOM 操作合并为一次，例如使用 DocumentFragment。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const el = document.createElement('div');
  el.textContent = i;
  fragment.appendChild(el);
}
container.appendChild(fragment); // 只触发一次重排

2. 使用 CSS 类代替频繁样式修改

// ❌ 频繁修改样式
el.style.color = 'red';
el.style.fontSize = '16px';

// ✅ 使用类切换
el.classList.add('highlight');

3. 避免强制同步布局

缓存布局属性值，避免在读写之间反复切换。

4. 使用 transform 和 opacity 实现动画

这两个属性可以由 GPU 加速 ，且不会触发重排或重绘，而是直接在合成层（Compositing Layer） 上完成。

.animate {
  transition: transform 0.3s, opacity 0.3s;
}

5. 提升元素到合成层

使用 will-change 或 transform: translateZ(0) 让浏览器提前创建独立图层，减少重绘范围。

.promote {
  will-change: transform;
  /* 或 */
  transform: translateZ(0);
}

---

七、性能调试工具

1. Chrome DevTools

• Performance 面板：录制页面性能，查看重排与重绘的时间线。
• Rendering 面板：启用"Paint flashing"可高亮重绘区域。

2. Lighthouse

提供性能评分，并提示潜在的布局抖动问题。

---

八、总结：优化原则

原则	说明
✅ 减少重排	避免频繁修改几何属性
✅ 合并重绘	批量修改样式，减少绘制次数
✅ 使用合成层	动画优先使用 transform 和 opacity
✅ 避免强制同步布局	缓存尺寸属性，避免读写交替
✅ 善用工具	使用 DevTools 分析性能瓶颈

---

结语

重排与重绘是前端性能优化的基石。作为开发者，我们不仅要写出功能正确的代码，更要关注其对渲染性能的影响。

通过理解浏览器的渲染机制，合理组织 DOM 操作，善用 CSS 优化技巧，我们可以构建出流畅、响应迅速的 Web 应用，为用户带来极致的体验。

🚀 记住：每一次不必要的重排，都是对用户体验的一次"伤害"。