will-change 是预分配 GPU 图层的指令，非提速开关；仅对 transform、opacity 等可合成属性有效，须 JS 动态控制生命周期，避免静态滥用导致显存飙升与卡顿。
will-change 不是“提前打个招呼就变快”的开关，它是让浏览器为特定变化预分配 GPU 图层的指令。用对了能减少合成阶段延迟；用错了反而吃内存、掉帧、滚动卡顿。
只对真正会变的属性设 will-change
浏览器只响应有限几个可合成属性，其他写了也白搭：
- 有效值：transform、opacity、filter、backdrop-filter（主流浏览器全支持）
- 基本无效或已弃用：left、top、width、height、background-color、color、scroll-position（iOS Safari 完全不支持）、content-visibility
- 危险写法：will-change: all、will-change: auto（无意义）、will-change="transform"（HTML 属性写法，完全被忽略）
必须动态控制，不能静态写死在 CSS 里
现代浏览器（Chrome 98+、Safari 16.4+、Edge 114+）已默认对 transform/opacity 动画自动升层。CSS 中写 .item { will-change: transform; } 不但没额外收益，还会让所有匹配元素长期占着图层：
- 一屏 20 个列表项 → 20 个常驻 GPU 图层 → 显存飙升、滚动卡顿
- 移动端尤其敏感，iOS Safari 图层管理保守，易白屏或闪退
- 正确做法是 JS 控制生命周期：动画前 1–2 帧开启，结束后及时清空
安全设置 + 双 requestAnimationFrame 清除
直接设完就清，容易导致图层未稳定就销毁，引发闪屏或撕裂。推荐写法：
立即学习“前端免费学习笔记（深入）”；
- 开始前：element.style.willChange = 'transform, opacity';
- 结束后（监听 animationend 或 transitionend）：
requestAnimationFrame(() => {
requestAnimationFrame(() => {
element.style.willChange = 'auto';
});
});
第一层进下一帧，第二层确保绘制完成、图层已参与合成
验证是否真生效，别靠猜
加了不等于优化成功，必须实测确认：
- Chrome DevTools → More Tools → Layers 面板 → 手动触发动画
✅ 看到元素出现在列表中，Reason 是 layer-for-transform 或 layer-for-opacity
❌ Reason 是 will-change → 仅表示收到提示，未真正升层 - Rendering 面板勾选 «Paint flashing»
满屏绿色闪烁 → will-change 泛滥，该减了
