will-change 对 top/left 动画无效，必须改用 transform 实现位移并动态设置 will-change: transform；否则被忽略、卡顿、内存暴涨、图层爆炸。
直接说结论：will-change 对纯定位（top/left）动画无效，必须先用 transform 替代定位逻辑，再配合动态设置 will-change: transform 才可能起效；否则加了反而卡顿、内存涨、图层爆炸。
为什么 top/left 动画加 will-change 没用还更卡
浏览器看到 will-change: top 或 will-change: left 会直接忽略——这些不是合法值。只有 transform、opacity、scroll-position、contents 被规范支持。
而 top/left 属于布局属性，每次变更都强制触发 Layout + Paint，will-change 无法跳过这个过程。
更糟的是：如果同时写了 .item { will-change: transform; } 这类全局 CSS，但动画本身还在用 left，那只是白占 GPU 图层，中低端机一屏 10 个元素就可能掉帧。
必须先用 transform 替代定位逻辑
这不是“锦上添花”，而是前提。定位（position: absolute 等）只用于锚定初始位置，所有动态位移必须交给 transform：
- 原写法：
top: 100px; left: 50px;→ 改为top: 0; left: 0; transform: translate(50px, 100px); - 居中弹窗保留
top: 50%; left: 50%，但用transform: translate(-50%, -50%)补偿，这是安全且无需改 JS 的方案 - 滚动吸顶导航：JS 只更新
element.style.transform = `translateY(${y}px)`，彻底避开top - 绝对定位图标旋转时，加
transform-origin: 0 0控制绕左上角转，避免因定位偏移导致旋转中心漂移
will-change 必须动态控制，不能写死
它不是样式开关，是“临门一脚”的提示。静态声明等于长期锁死图层资源：
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确时机：用户交互触发后、动画 class 应用前那一帧设
element.style.willChange = 'transform' - ✅ 正确清除：监听
animationend（不是transitionend），或用双requestAnimationFrame确保绘制完成：requestAnimationFrame(() => { requestAnimationFrame(() => { element.style.willChange = 'auto'; }); }); - ❌ 错误做法：
.card { will-change: transform; }写在 CSS 文件里；或在页面加载时就给所有卡片加上 - ⚠️ 注意：父容器设了
will-change，子元素又做transform动画，容易引发图层嵌套，iOS Safari 尤其敏感
移动端特别要注意的三个细节
安卓 WebView 和 iOS Safari 对图层和亚像素处理差异大，以下点不处理，前面全白忙：
- iOS Safari 对
translateX(0.3px)有轻微抖动，可用translate3d(0, 0, 0)强制启用 3D 上下文兜底 - 父容器
overflow: hidden时，transform元素可能被意外裁切，可临时加will-change: transform或微调top补偿 -
filter: blur()或backdrop-filter会直接阻止 GPU 合成，哪怕加了will-change也无效；动画中要禁用或降级
真正决定流畅度的，从来不是加没加 will-change，而是动画是否落在合成路径上——这要求你从第一行位移代码开始，就放弃 top/left，只信 transform 和 opacity。
