top/left 触发重排，应改用 transform: translate() 实现硬件加速；opacity 需设为非整数（如0.99）才能稳定触发GPU合成；will-change 仅为提示符，不可滥用，真正决定硬件加速的是属性变更是否绕开Layout/Paint。
top/left 触发重排，直接绕开硬件加速
用 top 或 left 移动元素时，浏览器必须重新计算布局（Layout），因为这两个属性属于「几何变更」，会改变元素在文档流中的位置关系。哪怕父容器只是 position: relative，每次动画帧都强制触发 Layout → Paint → Composite 全流程，GPU 无法介入。
常见错误现象：top: 0 → top: 10px 动画在 Performance 面板里显示大量紫色（Layout）和绿色（Paint）长条，FPS 掉到 20–30；开启 Chrome 的 Rendering → Paint flashing 后，整个元素持续闪绿边。
- 即使加了
will-change: top，也无效——浏览器不支持对布局类属性做合成层预告 -
transform: translate()是唯一安全替代方案，它不修改布局上下文，只影响合成阶段 - 移动端尤其明显：iOS Safari 对 Layout 操作的惩罚更重，容易掉帧甚至卡死主线程
transform 是硬件加速的“通行证”
transform（含 translate、scale、rotate、translateZ(0)）是目前最可靠、兼容性最好的硬件加速入口。现代浏览器（Chrome ≥ 60、Firefox ≥ 59、Safari ≥ 14.1）只要检测到该属性被用于动画或过渡，就会自动将元素提升为独立合成层，后续变化全由 GPU 的 Composite 阶段处理，跳过 Layout 和 Paint。
注意：不是所有 transform 写法都等效：
立即学习“前端免费学习笔记（深入）”；
-
transform: translateX(10px)✅ 安全，2D 变换，全平台无兼容问题 -
transform: translate3d(0, 0, 0)⚠️ 曾被广泛滥用，现在多数场景没必要；仅当需要明确触发 3D 上下文（如配合perspective）时才用 -
transform: translateZ(0)❌ 已过时；现代浏览器不再依赖它“骗”图层，反而可能因无意义提升增加内存开销
opacity 值必须是非整数才能触发 GPU 合成
opacity 看似简单，但值为 1 或 0 时，浏览器可能直接优化掉图层提升——因为它认为“完全不透明/完全隐藏”无需独立合成。只有设为小数（如 0.99、0.999），才会稳定触发硬件加速。
典型误用场景：
- 淡入动画写成
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }→ 中间帧可能退回到 CPU 渲染 - 正确写法：
from { opacity: 0.001; } to { opacity: 0.99; }，既保持视觉效果，又确保全程走 GPU 合成 - 慎用
opacity: 0做隐藏：它仍占文档流且可能阻止事件穿透；真要隐藏优先用visibility: hidden或display: none
will-change 不是开关，而是高风险提示符
will-change 本身不触发硬件加速，只是向浏览器“预告”某个属性即将频繁变化。浏览器收到后，可能提前创建合成层——但也可能忽略，或创建失败。
关键限制：
- 只应在动画开始前 1 帧设置，动画结束后立即清除（例如用 JS 控制 class 切换）
- 滥用后果严重：每个
will-change: transform都会多占几 MB 内存；10 个以上可能引发 iOS 内存警告 - 不能代替真实属性：光写
will-change: left没用，left本身不进合成管线 - 现代实践中，优先靠
transform自动触发；will-change仅用于极少数复杂滚动场景（如 sticky header + transform 动画叠加）
真正决定是否走 GPU 的，从来不是你写了什么声明，而是你改了哪个属性、改的方式是否绕开了 Layout/Paint。别迷信“加个 translateZ(0) 就能飞”，先看 DevTools 的 Layers 面板——如果没出现新图层，说明加速根本没生效。
