transform（位移/缩放/旋转/倾斜）和opacity能减少重绘，因其变更由合成器直接处理，跳过layout和paint，仅触发composite；而left/top、background-color等会触发重排或重绘。
为什么 transform 和 opacity 能减少重绘
浏览器对某些 CSS 属性的变更能直接交由合成器（compositor）处理，跳过 layout 和 paint 阶段。而 transform（仅限位移、缩放、旋转、倾斜）和 opacity 正是其中被硬件加速支持最稳定的两个——它们不触发重排（reflow），也不强制重绘（repaint），只触发合成（composite）。
常见错误现象：用 left/top 做动画，或频繁改 background-color、height，导致 FPS 掉到 20 以下，手指一滑就卡顿。
- 只有
transform: translateX()、translateY()、scale()、rotate()等“可合成属性”才安全；transform: rotateX()在部分安卓 WebView 中可能降级为软件渲染 -
opacity必须是 0–1 之间的数值，设成opacity: 0.999没问题，但opacity: inherit或opacity: unset会失去合成层 - 别指望加了
will-change: transform就万事大吉——它只是提示，不能替代属性本身是否可合成
如何确认元素真的进了合成层
Chrome DevTools 的 Layers 面板（在 More Tools → Layers）能直观看到哪些元素被提升为独立图层。但更实用的是在 Elements 面板中选中元素，看右侧 Computed 标签页里 rendering 是否显示 Composited。
使用场景：调试一个轮播图卡顿，或下拉刷新时 header 抖动。
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools →
Settings→Preferences→ 勾选Enable paint flashing，闪烁的绿色区域就是重绘区；理想状态是只有动画元素在闪，其余静止 - 如果某元素始终没进合成层，检查它是否被
overflow: hidden或clip-path截断——这些会阻止图层提升 - 父容器有
transform: translateZ(0)强制提升，不如直接在动的子元素上写transform: translateX(0)，后者更精准、无副作用
transform 动画的兼容性与性能陷阱
不是所有 transform 写法都等价。移动端尤其要注意 Safari 和旧版 Android Webview 对三维变换的处理差异。
参数差异：translate3d(0, 0, 0) 曾被广泛用于“骗”浏览器建合成层，但现在已不推荐——它比 translateY(0) 多一次矩阵计算，且在 iOS 15.4+ 中反而可能触发额外的图层合并开销。
- 优先用
transform: translateY(-50%)做垂直居中，而不是top: 50%; margin-top: -XXpx——后者触发布局，前者纯合成 - 避免在动画中混用
transform和left，哪怕只写一次也会让浏览器放弃优化路径，回退到全量重绘 - 用
requestAnimationFrame手动驱动transform时，确保每次只改一个值，且用element.style.transform = `translateX(${x}px)`，不要拼字符串再 setAttribute
opacity 动画的隐藏限制
opacity 看似简单，但在真实项目里常因层级关系失效。它必须作用于最终渲染的视觉元素，而非中间容器。
性能影响：opacity: 0 的元素仍参与布局和事件捕获，只是不可见；若想彻底移除交互和渲染负担，得配合 pointer-events: none 和 visibility: hidden（注意：后者会触发重排）。
- 不要对
position: fixed元素单独设opacity动画——iOS Safari 下容易出现闪烁或合成层丢失 - 当父容器有
filter: blur(2px)时，子元素的opacity动画大概率降级为 CPU 渲染，因为 filter 会强制整个图层进入软件绘制流水线 - 用
@keyframes写 opacity 动画时，起始帧必须明确写opacity: 1，不能省略；否则部分安卓机型会从默认值开始插值，造成首帧突变
真正难的不是知道该用 transform 和 opacity，而是发现哪个父元素悄悄加了 will-change: scroll-position，或者哪行 SCSS mixin 里嵌套了 backface-visibility: hidden，让本该合成的元素又掉回主线程。这类问题往往要靠 Layers 面板逐层点开才能揪出来。
