will-change 仅对 transform 和 opacity 有效，动态设置并配对清除才能真正触发合成层优化；静态声明在现代浏览器中已失效，滥用会导致性能下降。
will-change 只对 transform 和 opacity 有效
浏览器只对 transform 和 opacity 的变化做合成层优化；加 will-change: left、will-change: width 或 will-change: background-color 不仅无效，还会强制创建图层、触发布局重算，动画反而更卡。常见错误是给 position: static 元素加 will-change: top，浏览器根本无法硬件加速，还多一层无效提示。
✅ 安全值：transform、opacity（scroll-position 在 Chrome 已废弃，Safari 不支持）
❌ 危险值：left、top、width、height、background-color
❌ 魔鬼写法：will-change: all——浏览器无法预判，通常忽略或降级处理
静态声明在 Chrome 98+ 基本失效
现代 Chrome（98+）、Edge、Safari 已默认对 transform 和 opacity 动画自动创建合成层。你在 CSS 里写 .anim { will-change: transform; } 不会带来额外收益，反而让所有匹配元素长期驻留图层，GPU 内存持续上涨，滚动变慢甚至 OOM。
必须动态设置：element.style.willChange = 'transform'
必须配对清除：不能立刻清，否则图层销毁太早，导致闪屏或撕裂
必须用双 requestAnimationFrame 确保绘制完成后再移除
必须加在真正动画的元素本身
will-change 不继承、不传递。比如用 .modal 做 transform 动画，却给 .open-btn 加 will-change: transform，浏览器会为按钮升层，对弹窗毫无帮助。
父容器加了 overflow: hidden、filter: blur(0.1px) 或非 identity 的 transform，会压制子元素图层，导致 will-change 失效
列表项批量动画时，只对当前可视区域内的元素动态启用，避免 100 个 item 全部占着 GPU 图层
加之前先看 Performance 面板再决定
打开 Chrome DevTools → Performance → 录制一段动画，重点看主线程是否频繁卡在 Paint 或 Layout 阶段：
✅ 加的信号：主线程空闲，但 Composite 占比高、帧率低于 60fps，且动画只用 transform/opacity，首帧明显滞后
❌ 别加的信号：主线程满载、大量 Layout 或 Paint，说明瓶颈不在合成阶段，加了也白加
验证是否真生效，别靠猜：打开 Layers 面板，手动触发动画，看到元素出现在图层列表中，且 Reason 字段显示 layer-for-transform 或 layer-for-opacity，才算真正升层；若是 will-change，仅代表提示收到，不代表已执行优化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
