如何最小化重绘？

重绘（Repaint）是指浏览器重新绘制元素的视觉外观（如颜色、背景、阴影等），而不改变元素的布局结构。虽然重绘的性能消耗比重排（Reflow）低，但频繁或大面积的重绘仍会导致页面卡顿，尤其是在动画或高频交互场景中。以下是最小化重绘的核心策略：

一、优先修改“仅触发重绘”的属性

重绘由元素的非布局属性变化触发，而重排由布局属性（尺寸、位置等）变化触发。若只需视觉效果修改，优先选择仅触发重绘的属性，避免修改会触发重排的属性。

示例：

/* 优化前：修改 width 触发重排+重绘 */
.button:hover {
   
  width: 120px; /* 布局属性，触发重排 */
}

/* 优化后：修改 background 仅触发重绘 */
.button:hover {
   
  background: #ff6600; /* 非布局属性，仅重绘 */
}

二、批量修改样式，减少重绘频率

即使是仅触发重绘的属性，频繁单独修改仍会导致多次重绘。通过批量修改可将多次重绘合并为一次。

1. 用 class 一次性切换样式

将需要修改的样式定义在一个类中，通过添加/移除类实现批量更新：

/* 定义样式类 */
.highlight {
   
  color: red;
  background: yellow;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

// 优化前：多次单独修改（可能触发多次重绘）
element.style.color = "red";
element.style.background = "yellow";
element.style.boxShadow = "0 0 10px rgba(0,0,0,0.3)";

// 优化后：一次类切换（仅一次重绘）
element.classList.add("highlight");

2. 离线修改 DOM 后再插入文档流

若需要动态修改多个元素的样式，先将元素从文档流中移除（如隐藏或放入文档片段），修改完成后再插入，减少中间过程的重绘：

// 隐藏元素（脱离文档流，修改时不触发重绘）
element.style.display = "none";

// 批量修改样式
element.style.color = "blue";
element.style.background = "gray";

// 重新显示（触发一次重绘）
element.style.display = "block";

三、利用 CSS 硬件加速（减少重绘范围）

通过将元素放入浏览器的“合成层”（由 GPU 处理），可避免元素修改时触发重绘，仅触发低开销的“合成”操作。

1. 用 transform 和 opacity 实现动画

transform（如位移、缩放、旋转）和 opacity 的修改不会触发重绘，而是由 GPU 直接处理，性能极高：

/* 优化前：修改 background 触发重绘（动画中每秒60次） */
.badge {
   
  transition: background 0.3s;
}
.badge:hover {
   
  background: red; /* 每次变化都重绘 */
}

/* 优化后：用 transform 实现动画（无重绘） */
.badge {
   
  transition: transform 0.3s;
  transform: scale(1);
}
.badge:hover {
   
  transform: scale(1.1); /* GPU 处理，无重绘 */
}

2. 谨慎使用 will-change 提示浏览器优化

will-change 告知浏览器元素可能发生的变化，让浏览器提前准备 GPU 资源，减少实际修改时的重绘：

/* 告知浏览器元素可能会修改 transform */
.animated-element {
   
  will-change: transform; /* 提前准备 GPU 加速 */
  transition: transform 0.3s;
}
.animated-element:hover {
   
  transform: translateX(50px); /* 无重绘 */
}

⚠️ 注意：不要滥用 will-change（会占用额外 GPU 内存），仅用于确实需要优化的元素（如动画元素）。

四、限制重绘范围

重绘的成本与元素的面积和复杂度正相关（如大图片、复杂阴影）。缩小重绘区域可显著降低消耗。

1. 使用 contain: paint 隔离绘制范围

contain: paint 告诉浏览器：元素的绘制不会超出自身边界，外部无需因内部变化而重绘，从而限制重绘范围：

.card {
   
  contain: paint; /* 内部变化仅重绘自身，不影响外部 */
  overflow: hidden; /* 配合 contain: paint 效果更好 */
}

适用于：卡片、弹窗、独立组件等内部变化不影响外部的元素。

2. 避免大面积元素的重绘

• 减少对全屏元素（如 body、大背景图）的频繁样式修改。
• 若需动态修改大区域样式，可拆分为小元素，仅重绘变化的部分。
• 复杂阴影（box-shadow: 0 0 50px rgba(0,0,0,0.5)）重绘成本高，可简化或用图片替代。

五、避免不必要的重绘触发

1. 减少透明度过渡中的重绘

opacity 本身不会触发重绘，但如果元素有 background 或子元素，opacity < 1 可能导致浏览器创建合成层，若同时修改其他属性（如 background），仍会触发重绘。
优化：尽量单独使用 opacity 动画，避免与其他属性同时修改。

2. 避免 visibility: hidden 与重绘

visibility: hidden 会隐藏元素，但元素仍占据布局空间，修改其样式仍会触发重绘。若需完全避免重绘，可改用 display: none（但会触发重排，需权衡）。

3. 优化高频事件中的样式修改

在 scroll、resize、mousemove 等高频触发的事件中，若直接修改样式会导致大量重绘。可通过节流（throttle） 或防抖（debounce） 限制执行频率：

// 节流：每隔 100ms 执行一次，减少重绘次数
let lastTime = 0;
window.addEventListener("mousemove", (e) => {
   
  const now = Date.now();
  if (now - lastTime > 100) {
   
    element.style.background = `hsl(${
     e.clientX % 360}, 50%, 50%)`;
    lastTime = now;
  }
});

六、工具检测重绘情况

使用浏览器开发者工具可视化重绘，定位问题区域：

1. 打开 Chrome 开发者工具（F12）。
2. 进入「More Tools」→「Rendering」。
3. 勾选「Paint flashing」：页面中重绘的区域会闪烁绿色，可直观看到重绘频率和范围。
4. 结合「Performance」面板录制操作，查看「Paint」阶段的耗时，针对性优化。

总结

最小化重绘的核心思路是：

1. 选对属性：优先修改仅触发重绘的属性（如 color），避免修改布局属性。
2. 批量操作：用 class 或离线 DOM 合并多次重绘为一次。
3. GPU 加速：用 transform/opacity 实现动画，避免重绘。
4. 限制范围：用 contain: paint 隔离重绘区域，减少大面积重绘。

通过这些策略，可显著降低重绘对性能的影响，让页面更流畅。