滚动卡顿常因重排重绘频繁导致，使用 will-change 可提前告知浏览器将变化的元素，触发图层提升和 GPU 加速，结合硬件加速、contain 属性及 passive 事件监听等手段，能有效优化溢出滚动性能。
页面滚动卡顿，尤其是容器溢出（overflow）出现滚动条时，常是因为浏览器在滚动过程中频繁重绘或重排，导致帧率下降。使用 will-change 可以提前告知浏览器某个元素将要发生变化，从而让浏览器提前做好优化准备，提升滚动流畅度。
1. 理解滚动卡顿的常见原因
当一个元素设置了 overflow: auto 或 overflow: scroll，内部内容超出时会触发滚动。但若容器内元素结构复杂、包含大量图片或动画，浏览器每次滚动都需要重新计算布局、绘制像素，容易造成掉帧。
常见问题包括：
- 未启用硬件加速，导致滚动依赖 CPU 渲染
- 频繁触发重排（reflow）或重绘（repaint）
- 滚动容器内子元素层级复杂，合成层管理不佳
2. 使用 will-change 提升渲染效率
will-change 是 CSS 属性，用于提示浏览器某个元素的哪些属性即将改变，浏览器可提前将其提升为独立的合成层（composite layer），减少滚动时的渲染开销。
立即学习“前端免费学习笔记（深入）”；
对于滚动容器，可以这样设置：
.scrolling-container {
overflow-y: scroll;
will-change: transform;
}
虽然滚动本身不是 transform，但设置 will-change: transform 能促使浏览器提前将该元素放入独立图层，利用 GPU 加速合成，从而减轻主线程压力。
注意：不要滥用 will-change。如果对太多元素使用，反而会导致内存占用过高和性能下降。建议仅在用户即将交互的元素上动态添加：
// 滚动开始前添加 element.style.willChange = 'transform'; // 滚动结束后移除 element.style.willChange = 'auto';
3. 配合其他优化手段效果更佳
除了 will-change，还可以结合以下方法进一步优化滚动性能：
- 启用硬件加速：使用 transform: translateZ(0) 或 translate3d(0,0,0) 强制提升图层
- 避免过度重绘：给滚动区域设置 contain: strict，限制渲染作用域
- 控制子元素复杂度：简化 DOM 结构，避免在滚动容器中嵌套过多动画或阴影
- 使用 passive event listeners：确保 touch/scroll 事件不阻塞滚动
基本上就这些。合理使用 will-change，配合图层优化和事件处理，能显著改善 CSS 盒模型溢出导致的滚动卡顿问题。关键是在需要时提前告知浏览器，而不是一开始就“全量优化”。
