前端性能优化：如何减少重绘与重排？

🚀 前端性能优化：如何减少重绘与重排？

在浏览器中，当你修改了一个元素的样式或结构，浏览器并不是简单地"画"一下就行，它需要经过一系列复杂的计算和绘制过程。

如果这些过程过于频繁或开销过大，用户就会感觉到：

"页面怎么卡了一下？"

"滚动怎么不跟手？"

"动画怎么有残影？"

这就是 重排（Reflow） 和 重绘（Repaint） 在作祟。理解并优化它们，是进阶高级前端工程师的必经之路。

📂 目录

[🤔 什么是重绘与重排？](#🤔 什么是重绘与重排？)
[🏭 浏览器的渲染流水线](#🏭 浏览器的渲染流水线)
[⚡ 触发重排与重绘的场景](#⚡ 触发重排与重绘的场景)
[🛠️ 如何减少重排与重绘？（核心干货）](#🛠️ 如何减少重排与重绘？（核心干货）)
[🧪 实战案例：从卡顿到流畅](#🧪 实战案例：从卡顿到流畅)
[💡 总结](#💡 总结)

1. 🤔 什么是重绘与重排？

为了通俗理解，我们把浏览器渲染页面想象成装修房子。

🎨 重绘（Repaint）

定义：当元素的外观改变（如颜色、背景色、可见性），但不影响布局（位置、大小不变）时，浏览器只需重新绘制该元素的外观。

比喻：你给墙壁换了一种颜色的油漆。
成本：较低。只需要重新涂抹表面，不需要移动家具。
触发属性举例 ：color, background-color, visibility, box-shadow。

📐 重排（Reflow / Layout）

定义：当元素的几何尺寸 或位置发生改变，或者文档结构发生变化时，浏览器需要重新计算所有受影响元素的几何信息，并重新排列它们。

比喻：你砸掉了一面墙，或者把沙发从一个房间搬到了另一个房间。所有的家具位置可能都要重新调整。
成本：极高。因为一个元素的变动可能导致父元素、兄弟元素甚至子元素的位置连锁反应。
触发属性举例 ：width, height, padding, margin, display, font-size, 添加/删除 DOM 节点。

关键点 ：重排必然导致重绘，但重绘不一定导致重排。

2. 🏭 浏览器的渲染流水线

要优化性能，首先要知道浏览器是怎么工作的。标准的渲染流程如下：

构建 DOM 树：解析 HTML。
构建 CSSOM 树：解析 CSS。
生成渲染树（Render Tree） ：结合 DOM 和 CSSOM，排除不可见元素（如 display: none）。
布局（Layout / Reflow） ：计算每个节点在屏幕上的确切位置和大小。👈 重排发生在这里
绘制（Paint / Repaint） ：将像素填充到屏幕上（颜色、边框、阴影等）。👈 重绘发生在这里
合成（Compositing）：将各个图层合并，最终显示在屏幕上。

优化的核心思路：尽量跳过第 4、5 步，或者减少它们的执行频率和范围。

3. ⚡ 触发重排与重绘的场景

❌ 触发重排（高成本）

初始页面加载：不可避免，但可以通过优化资源加载速度来改善。
DOM 结构变化：添加、删除、修改 DOM 节点。
样式变化影响几何属性 :
- 修改 width, height, margin, padding。
- 修改 font-size, line-height。
- 修改 display (如 none 变 block)。
获取某些布局信息 ：
- 访问 offsetTop, offsetLeft, offsetWidth, offsetHeight。
- 访问 scrollTop, scrollLeft, clientWidth 等。
- 调用 getComputedStyle()。注意：浏览器为了给出最新的准确值，会强制立即执行一次重排（称为 强制同步布局），这是性能杀手！

⚠️ 触发重绘（低成本）

修改 color, background-color。
修改 visibility (注意：visibility: hidden 依然占据空间，只重绘；display: none 会重排)。
修改 outline, box-shadow (部分情况)。

4. 🛠️ 如何减少重排与重绘？（核心干货）

✅ 策略一：集中修改样式（批量操作）

不要逐条修改样式，这会触发多次重排。

❌ 错误做法：

javascript 复制代码

const el = document.getElementById("myDiv");
el.style.width = "100px"; // 重排
el.style.height = "200px"; // 重排
el.style.margin = "10px"; // 重排

✅ 正确做法 1：使用 class 切换

css 复制代码

/* CSS */
.new-style {
  width: 100px;
  height: 200px;
  margin: 10px;
}

javascript 复制代码

// JS
el.className = "new-style"; // 只触发一次重排

✅ 正确做法 2：使用 cssText

javascript 复制代码

el.style.cssText = "width: 100px; height: 200px; margin: 10px;";

✅ 正确做法 3：使用 DocumentFragment

如果需要插入大量 DOM 节点，先在内存中构建好，再一次性插入文档。

javascript 复制代码

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const li = document.createElement("li");
  li.innerText = `Item ${i}`;
  fragment.appendChild(li);
}
ul.appendChild(fragment); // 只触发一次重排

✅ 策略二：避免强制同步布局

不要在修改样式后立即读取布局信息。

❌ 错误做法：

javascript 复制代码

el.style.width = "100px";
console.log(el.offsetWidth); // 😱 浏览器被迫立即重排以获取最新宽度
el.style.height = "200px"; // 再次重排

✅ 正确做法：

javascript 复制代码

// 先读取
const currentWidth = el.offsetWidth;
// 再写入
el.style.width = currentWidth + 10 + "px";
el.style.height = "200px";

提示：如果必须读写交替，可以使用 requestAnimationFrame 将读写操作分离到不同的帧中。

✅ 策略三：使用 transform 和 opacity 实现动画

这是现代前端性能优化的黄金法则。

transform (平移、旋转、缩放) 和 opacity (透明度) 的改变不会触发重排，甚至不会触发重绘。
它们通常由 GPU 加速处理，直接在**合成层（Compositor Layer）**完成。

❌ 错误做法：使用 top/left 做动画

css 复制代码

/* 每次改变 top/left 都会触发重排 */
.box {
  position: absolute;
  top: 0;
  transition: top 0.3s;
}
.box:hover {
  top: 100px;
}

✅ 正确做法：使用 transform

css 复制代码

/* 性能极佳，无重排 */
.box {
  transition: transform 0.3s;
}
.box:hover {
  transform: translateY(100px);
}

✅ 策略四：将频繁动画元素提升为合成层

对于复杂的动画元素，可以强制浏览器将其提升为独立的图层，避免影响其他元素的渲染。

css 复制代码

.animated-element {
  will-change: transform; /* 提示浏览器提前优化 */
  /* 或者使用 hack 方式（旧版浏览器兼容） */
  /* transform: translateZ(0); */
}

注意：will-change 不要滥用，只在动画开始前添加，结束后移除，否则会增加内存消耗。

✅ 策略五：离线操作 DOM

当需要对 DOM 进行大量复杂操作时，可以先将其从文档流中移除，操作完后再放回去。

javascript 复制代码

const ul = document.getElementById("list");
ul.style.display = "none"; // 移除渲染树，后续操作不触发重排

// ... 进行大量的 DOM 修改 ...

ul.style.display = "block"; // 恢复，只触发一次重排

5. 🧪 实战案例：从卡顿到流畅

场景：做一个简单的下拉菜单展开动画。

❌ 卡顿版本（触发重排）

javascript 复制代码

// 假设通过 JS 控制高度展开
function expandMenu() {
  let height = 0;
  const timer = setInterval(() => {
    height += 5;
    menu.style.height = height + "px"; // 😱 每一帧都触发重排！
    if (height >= 200) clearInterval(timer);
  }, 16);
}

✅ 流畅版本（使用 CSS Transform）

css 复制代码

.menu {
  height: 200px;
  transform: scaleY(0); /* 初始状态：垂直缩放为0 */
  transform-origin: top;
  transition: transform 0.3s ease-out;
}

.menu.open {
  transform: scaleY(1); /* 展开：恢复原始比例 */
}

javascript 复制代码

function expandMenu() {
  menu.classList.add("open"); // ✅ 仅触发合成，GPU 加速，极其流畅
}

💡 总结

优化手段	原理	适用场景
批量修改 DOM/样式	减少重排次数	初始化、动态内容加载
使用 Class 切换	浏览器优化样式计算	状态切换（如激活、悬停）
读写分离	避免强制同步布局	复杂交互逻辑
Transform/Opacity 动画	避开重排重绘，启用 GPU	所有移动、缩放、淡入淡出动画
DocumentFragment	内存中操作，一次性插入	列表渲染、大量节点插入
Will-change	提前创建合成层	复杂且持续的动画元素

🚀 博主寄语 ：

性能优化不是微操，而是架构思维 。

在写每一行 CSS 和 JS 时，多问自己一句："这行代码会让浏览器重新计算布局吗？"

记住口诀 ：

重排重绘成本高，

批量操作是法宝。

动画首选 Transform，

读写分离别忘掉。

GPU 加速来帮忙，

页面流畅体验好！

希望这篇文档能帮你建立起前端渲染性能的完整知识体系！如果有疑问，欢迎在评论区留言。👇

喜欢这篇文章吗？记得点赞、收藏、转发哦！ ❤️