will-change 对复杂盒模型动画基本无效甚至有害，必须先将动画迁移到 transform 和 opacity 才能生效；仅 transform、opacity、scroll-position、contents 是合法值，其他属性声明均无效。
直接说结论：will-change 对“复杂盒模型动画”基本无效，甚至有害——除非你先把动画从 width、height、left、top、border-radius 等触发 layout/paint 的属性，迁移到只改 transform 和 opacity。
为什么复杂盒模型动画天然卡顿？
盒模型相关属性（如 width、height、padding、margin、border、border-radius）变化时，浏览器必须重新计算布局（Layout）和/或重绘（Paint）。哪怕只改一个 border-radius，也可能触发整个元素及其子树的重排+重绘。这种开销在 60fps 动画中根本扛不住。
will-change: width 或 will-change: border-radius 不会绕过 Layout/Paint，浏览器直接忽略这类声明，或仅做无效预分配，毫无收益。
- ✅ 只有
transform、opacity、scroll-position、contents是被浏览器真正响应的合法值 - ❌
will-change: width、will-change: background-color、will-change: left等均无法跳过重排重绘，纯属误导 - ⚠️ 即使写了
will-change: transform，但动画本身还在用left，那这个声明完全白加
想让复杂盒模型“动起来”，先重构动画逻辑
不是加 will-change，而是把“看起来像在变盒模型”的效果，用 transform 模拟出来。这是前提，否则一切优化都是空中楼阁。
立即学习“前端免费学习笔记（深入）”；
- 缩放容器？→ 改用
transform: scale()，而非改width/height - 圆角渐变？→ 用
transform: scale()+overflow: hidden配合内部子元素位移，或 SVG mask 替代border-radius动画 - 内边距呼吸感？→ 用
transform: translate()移动内部内容，外层保持固定尺寸 - 边框粗细变化？→ 用
transform: scale()模拟，或切换预设的box-shadow模拟边框
重构后，动画才真正进入合成路径（Composite-only），此时 will-change 才有介入价值。
动态设置 will-change: transform 的实操要点
重构完动画后，will-change 才是最后一道“启动加速器”，但它必须动态控制，不能写死。
- ✅ 动画开始前 1 帧设置：
element.style.willChange = 'transform'; - ✅ 动画结束后清理：
element.addEventListener('transitionend', () => { element.style.willChange = 'auto'; });（注意是'auto'，不是空字符串） - ✅ 若用
requestAnimationFrame控制，推荐嵌套两层：requestAnimationFrame(() => { requestAnimationFrame(() => { element.style.willChange = 'auto'; }); });确保清理发生在绘制完成之后，避免闪屏 - ❌ 禁止在
scroll或mousemove中高频 set/remove —— 没节流等于制造内存泄漏 - ❌ 禁止在 CSS 中全局声明：
.card { will-change: transform; }—— 列表页上百个卡片全驻留合成层，GPU 内存暴涨，滚动直接卡死
比 will-change 更关键的三件事
很多开发者盯着 will-change 调优，却漏掉了真正卡顿的根因：
- JS 中是否在动画帧里读取
offsetWidth、getBoundingClientRect()？—— 这会强制同步 Layout，打断渲染流水线 - 父容器是否有
overflow: hidden、filter: blur(1px)或非transform: none？—— 这些会压制子元素升层，will-change失效 - 主线程是否被长任务阻塞？比如一次渲染中执行了 80ms 的 JS 计算 —— 再好的合成层也救不了掉帧
真正复杂的盒模型交互，往往需要组合使用 contain: layout paint、transform 模拟、以及谨慎的 will-change 动态投放——它从来不是单点解药，而是一环扣一环的链路优化。
