用 transform: translate() 替代 top/left 是解决绝对定位动画卡顿的关键，因前者属合成属性、由 GPU 处理，避免重排，将每帧耗时从 20–30ms 降至 1–3ms。
直接用 transform: translate() 替代 top/left 是解决绝对定位动画卡顿最有效的手段，不是“稍好一点”，而是把每帧耗时从 20–30ms 降到 1–3ms 的关键切换。
为什么 transform 比 top/left 动画快得多
浏览器渲染流水线里，top 和 left 是布局属性（layout properties），每次修改都会触发重排（reflow）+ 重绘（repaint）；而 transform: translate() 属于合成属性（compositor property），只影响图层位移，由 GPU 独立处理，跳过布局计算阶段。
实测对比：滚动中每帧更新 top 值，Chrome Rendering 面板会高频显示 “Layout” 事件；换成 transform: translateY() 后，“Layout” 消失，仅剩 “Composite Layers”。
-
top: 100px→ 浏览器需重新计算元素在文档流中的几何位置，再更新绘制 -
transform: translateY(100px)→ 元素所在图层直接位移，不打断主线程 - 即使元素是
position: absolute，iOS Safari 17+ 和 Chrome 125+ 仍会对top/left执行轻量 Layout（实测 1–3ms/帧）
absolute + transform 的正确写法
常见错误是把 top/left 和 transform 混用，或误以为 transform 会覆盖定位偏移——它不会覆盖，而是叠加。最终渲染位置 = top/left 计算出的 layout 位置 + transform 的视觉位移。
立即学习“前端免费学习笔记（深入）”；
推荐做法是：用 position: absolute 确定初始锚点，再用 transform 做所有后续位移（包括居中、动画、滚动响应）。
- 居中宽高未知弹窗：
top: 50%; left: 50%; transform: translate(-50%, -50%)—— 这本身就是最佳实践，不用改 JS - 滚动吸顶导航：用 JS 监听
scroll，只更新element.style.transform = `translateY(${offset}px)` - 避免写法：
top: 20px; transform: translateY(30px)→ 实际下移 50px，且易被误读 - JS 控制时，避免
el.style.top = '100px'，统一用el.style.transform = 'translate(100px, 0)'
@keyframes 动画里只写 transform
混入 left 或 top 会导致整段动画降级回 CPU 渲染，失去 GPU 加速优势。动画中必须归零基础定位，再用 transform 表达全部位移。
- 错误：
@keyframes move { 0% { top: 0; } 100% { top: 100px; } } - 正确：
@keyframes move { 0% { transform: translateY(0); } 100% { transform: translateY(100px); } } - 多个变换要合并写：
transform: rotate(10deg) translateX(20px)，否则后设的会覆盖前设的 - 百分比值注意：在
transform中，translateY(10%)的 10% 是相对于元素自身高度，不是父容器高度
容易失效的坑和兜底细节
加了 transform 不等于自动 60fps。以下问题会让优化失效：
-
transform元素上同时存在filter: blur(2px)或backdrop-filter：这些会阻止图层被 GPU 合成 - 动画过程中 JS 频繁读取
offsetTop或getBoundingClientRect()：这会强制同步重排，打断渲染流水线 - 父容器写了
will-change: transform，子元素也在做transform动画：容易引发图层嵌套爆炸，低端机内存吃紧 - 移动端 iOS Safari 对亚像素
translateX(0.3px)有轻微抖动，可用translate3d(0, 0, 0)强制启用 3D 上下文兜底 -
transform不改变 DOM 几何信息，但点击响应区域（hit area）仍落在原始 layout 位置 —— 如果交互错位，说明你漏掉了归零top/left
真正难的不是写出那几行 transform，而是判断这个元素是否真的在「频繁重定位」：静态居中用 top/left 完全没问题，强行替换反而增加理解成本；只有滚动中动态调整位置（如吸顶、悬浮按钮、跟随手势的 tooltip）才值得切换。
