应优先使用 transform: translate() 替代 top/left 实现动画，因后者每帧触发重排而前者仅走 GPU 合成层；需归零 top/left、避免合成层降级，并慎用 will-change。
因为 transform: translate() 不触发重排（reflow），而 top/left 每帧都强制 layout，这是浏览器渲染流水线决定的硬约束，不是“建议”，是性能底线。
为什么 top/left 动画一动就卡
改 top 或 left 时，浏览器必须重新计算该元素在文档流中的几何位置：父容器是否被撑开、兄弟元素要不要重排、margin/padding/border 是否影响边界。哪怕加了 position: absolute，Chrome 和 Safari 在动画密集时仍会执行轻量级 layout（实测 1–3ms/帧），叠加起来直接拖垮帧率。
- DevTools Performance 面板里能看到大量黄色
Layout块 - 同个 3 秒动画，
top方案累计 layout 耗时约 80ms，translate仅约 8ms - 元素带
box-shadow、border-radius等复杂样式时，重绘成本翻倍
为什么 transform: translate() 能绕过重排
translate() 不改 DOM 几何信息，只告诉合成器：“把这个图层往 X/Y 挪 N 像素”。原始位置、尺寸、父子关系全部不变，浏览器自动为其创建独立合成层（compositing layer），GPU 直接处理位移。
- 动画期间主线程几乎不参与，CPU 时间趋近于 0
- 必须确保没被其他属性打断合成层，比如
filter、opacity和transform同时transition，旧版 Safari 会退化回 CPU 渲染 - 移动端亚像素抖动常见于
translateX(0.3px)这类小数步进，改用translate3d(0, 0, 0)可绕过
怎么安全替换 top/left 动画
不是简单把 left: 100px 改成 transform: translateX(100px)，而是要归零定位偏移，再用 transform 表达全部位移。
立即学习“前端免费学习笔记（深入）”；
- 原写法：
top: 20px; left: 30px→ 改为：top: 0; left: 0; transform: translate(30px, 20px) - JS 动态控制时，避免写
el.style.top = '100px'，改用el.style.transform = 'translate(100px, 0)' - 若需
transition，必须显式声明初始值，例如transform: translate(0, 0)，否则首次过渡会跳变 - 检查是否意外给父容器加了
transform（哪怕只是translateZ(0)），它会强制创建新包含块，影响子元素定位参考
什么场景其实不用换
静态居中（比如弹窗初始化）不需要改：用 top: 50%; left: 50%; transform: translate(-50%, -50%) 本身不触发重排，性能无差别；真正要换的是滚动时动态调整位置的场景，比如吸顶导航、跟随悬浮按钮——这些才是每帧重排的重灾区。
复杂点在于：不是所有 transform 都能保帧率。一旦和 filter、clip-path 或频繁变更的 z-index 混用，合成层可能被降级，GPU 加速就失效了。
