transform 动画性能优于 top/margin 等属性，因其不触发回流（reflow）和重绘（paint），仅在 GPU 合成层操作；而 top、margin 等会改变文档流布局，强制浏览器重新计算布局，导致 CPU 开销大。
动画用 transform 实现位移或缩放，性能明显优于直接改 top、margin、width 等属性——核心在于是否触发浏览器的「布局计算」（reflow）和「重绘」（repaint）。
为什么 transform 不会触发回流
浏览器渲染管线中，transform 属于「合成层」操作：它只改变元素在 GPU 图层中的位置/大小/角度，不改变 DOM 的几何信息（比如元素实际占位、盒模型尺寸、文档流位置），因此无需重新计算整个页面的布局。
-
top或margin-left会改变元素在文档流中的位置 → 触发 layout（回流）→ 连带影响兄弟/父级元素 → CPU 开销大 -
transform: translateX(100px)只是把已渲染好的图层“挪个地方” → 浏览器跳过 layout 和 paint，直接交给 GPU 合成 → 帧率更稳 - 哪怕对
position: static元素使用transform，也不会影响其他元素布局，这是它最实用的特性之一
GPU 加速不是自动开启的
仅靠 transform 并不等于一定走 GPU 渲染；现代浏览器通常会对含 transform 或 opacity 的元素自动提升为独立图层（layer），但某些情况下仍可能 fallback 到 CPU 渲染。
- 常见触发条件：
transform: translateZ(0)、transform: translate3d(0,0,0)、will-change: transform -
will-change: transform是显式提示，但别滥用——每个声明都会提前创建图层，过多会耗尽 GPU 内存，反而拖慢性能 - Chrome DevTools 的「Layers」面板可验证是否真正生成了独立合成图层
transition 动画必须配对使用 transform
如果只给 transition 指定 left 或 margin-top，即使写成 transition: left 0.3s ease，也逃不开回流；只有作用在 transform 上，才能享受硬件加速。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
transition: transform 0.3s ease;+transform: translateX(50px); - ❌ 无效：
transition: margin-left 0.3s ease;即使看起来“动得一样”，实则卡顿风险高 - 多个属性同时过渡时，务必确保所有动画属性都属于「可合成」类型（如
transform+opacity），混用background-color会导致部分帧退回到 CPU 渲染
真正影响流畅度的，从来不是“写了多少行 CSS”，而是哪几个属性被改、改完后浏览器要重跑哪段流水线。用错一个 top 就可能让 60fps 掉到 30fps，而这个掉帧在小屏设备上尤其明显——它不会报错，只会悄悄让用户觉得“不够跟手”。
