用 will-change 优化渲染性能：少折腾、看得快

在页面滚动或动画中，浏览器常会把元素从复合层（composite）切出，触发重排与重绘，页面会“卡一拍”。想在不牺牲动画平滑度的前提下把卡顿感降下来，一个值得细抠的渲染优化点是 CSS 的 will-change。

为什么它能帮你“看”得更快

will-change 并不直接控制渲染，而是给浏览器一个“关注点”：它在哪些属性上需要更精细的合成与预计算。合理使用可以让浏览器提前准备资源、减少不必要的合成切出。

• 目标属性优先：让浏览器只在指定的属性上做预计算，其他属性尽量保持稳定。
• 避免无谓的合成切出：减少不必要的层切换与重排，让动画更顺滑、页面更稳。

使用场景与关键决策

何时启用

• 滚动时需要微动的元素（如固定定位的导航、遮罩层、状态切换的渐变）
• 需要连续小幅变换的样式（如 transform: translateY、filter、opacity）
• 动画的“最后一公里”要做合成优化（不是一开始的 CSS 过渡，而是动画的执行）

不要滥用

• 避免在不常变化的页面元素上开启，否则会增加合成开销。
• 不要把它当作“替代动画”的万能药，过度依赖会带来新的维护成本。

实战要点

1) 明确目标属性

优先把 will-change 作用在单个、常用的属性上，优先选择 transform、opacity、filter 等连续、可合成的属性。

.section {
  will-change: transform;
}

如果你需要同时调整多个，尽量合并在同一合成单元，而不是把多个不同的属性都放到 will-change 里。

2) 滚动场景的预渲染

在滚动过程中需要保持稳定的元素，可以给固定定位或 sticky 的容器加上 will-change，让浏览器提前准备好合成资源。

.navbar {
  will-change: transform, opacity;
}

3) 动画“最后一公里”的优化

对需要连续小幅变换的动画，把关键帧的合成属性放入 will-change，减少合成切出带来的抖动。

@keyframes slide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50px);
  }
}

.slide {
  animation: slide 0.3s;
  will-change: transform;
}

4) 环境感知：避免“性能偷懒”

在低性能设备上，将 will-change 的范围控制更小，并配合 transition 或 animation 的 easing 进行权衡，避免为了平滑而牺牲渲染性能。

评估与调优

用工具自检

借助浏览器开发者工具的 Performance 面板，查看合成切出（composition cutout）的频次与抖动，对比开启/关闭 will-change 后的指标，判断是否带来实质提升。

A/B 测试与用户感知

对关键页面做 A/B 测试，关注滚动卡顿、动画平滑度与页面稳定性。结合用户实际反馈，进行取舍：在保证可用性的前提下追求更顺滑的体验。

结语

will-change 并不是能解决所有渲染问题的魔法开关，但它是优化动画与滚动体验的有力工具。把它的使用范围限定在真正需要精细合成的场景，聚焦在少数关键属性，通常就能在不增加复杂度的情况下带来明显改善。关键在于理解浏览器的合成机制，在可控成本内换取更顺畅的“人眼体验”。