用 transform 和 opacity 替代 left/top 等属性可实现 gpu 加速动画，避免重排重绘；需确保过渡仅含这两类属性，配合 will-change 慎用、避免 js 布局读取及父级干扰，chrome layers 面板验证图层是否真正提升。
直接用 transform 替换 left、top、width 等属性，是解决 CSS 动画卡顿最有效、成本最低的手段——它让动画从 CPU 主线程卸载到 GPU 合成线程，彻底避开重排（reflow）和重绘（repaint）。
为什么 transform 能稳住 60fps
浏览器对 left 或 top 的修改，每帧都要重新计算文档流位置、尺寸、换行，低端安卓机一帧内多次重排，主线程直接堵死；而 transform: translateX(100px) 只是挪动已有图层，GPU 直接合成，不碰布局也不重绘。
关键点在于：transform 和 opacity 是仅有的两类能走合成线程的 CSS 属性。其他任何属性——哪怕只混进一个 box-shadow 或 background-color——整段 @keyframes 或 transition 都会降级回 CPU 渲染。
- 错误写法：
transition: left 0.3s, background-color 0.3s—— 只要其中任一属性非合成，整条过渡就降级 - 正确写法：
transition: transform 0.3s, opacity 0.3s—— 且确保 JS 或 class 切换时，只改这两个属性 - 别信
transition: all 0.3s：它像定时炸弹，某次意外改了margin或color，动画就悄悄变卡
will-change 和 translateZ(0) 什么时候该用
will-change: transform 不是性能开关，它是内存预分配指令：浏览器看到它，就会提前创建纹理、分配显存、升层。滥用等于主动吃内存。
- 推荐做法：JS 中动画开始前 1–2 帧设置
el.style.willChange = 'transform'，监听transitionend后立刻清除：el.style.willChange = 'auto' - iOS Safari 对极短动画（≤16ms）可能不触发
transitionend，加兜底：setTimeout(() => el.style.willChange = 'auto', duration + 100) - 绝对不要写：
* { will-change: transform; }或.list-item { will-change: transform; }—— 安卓低端机容易 OOM -
transform: translateZ(0)在老版 Android WebView 中仍有兜底价值，但现代 Chrome/Safari 已基本不需要；它可能增加内存占用，慎用于列表项
动画过程中 JS 读取布局信息会悄悄破坏优化
即使你所有 CSS 都写对了，只要动画过程中 JS 偷偷调了一次 getBoundingClientRect()、offsetHeight、clientWidth 等 API，就会强制同步触发重排，掉帧立刻发生。
- 把布局读取操作集中做、提前做，或用
ResizeObserver/IntersectionObserver替代高频轮询 - 动画中只做纯样式写入（如
element.style.transform = 'translateX(10px)'），避免“读-写-读-写”模式 - 滚动监听里频繁 toggle 动画 class，没做节流，会导致图层反复创建销毁
- 父容器有
filter、clip-path或非 identity 的transform，GPU 加速会被压制，所有子元素被迫合并在一层绘制
如何确认 GPU 加速真的生效了
写了 transform: translateZ(0) 不等于就加速了。关键得看浏览器是否真建了独立图层。
- Chrome DevTools → Layers 面板才是唯一验证方式：没看到绿色边框包裹的独立图层，说明提升失败
- 常见失败原因：父级有
overflow: hidden、transform非 identity、或子元素被z-index强制合并 - 多个
@keyframes共享同一父容器时，若父级有动态filter，整个动画链路都会退回到 CPU 渲染
真正卡顿的根源，往往不是“动画太多”，而是“动画中偷偷干了别的事”——比如在 requestAnimationFrame 里反复读取 offsetTop，或者 hover 时顺手改了 border-color。这些细节不查 Layers 面板根本看不见，但一帧超时就是它们干的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
