CSS怎样降低移动端重绘频率_利用transform与opacity触发合成

transform（位移/缩放/旋转/倾斜）和opacity能减少重绘，因其变更由合成器直接处理，跳过layout和paint，仅触发composite；而left/top、background-color等会触发重排或重绘。

为何 transform 与 opacity 能够降低重绘

无需经过 layout 和 paint 阶段，某些 CSS 属性的变更会被浏览器直接送至合成器（compositor）。而 transform（仅适用于位移、缩放、旋转、倾斜）和 opacity 正是这两个获得了最稳定的硬件加速支持——合成（composite）是它们唯一触发的环节，重排（reflow）不会发生，重绘（repaint）也不会被强制执行。

常见的错误表现是：使用 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 由于 filter 会让整个图层被迫进入软件绘制流水线，动画转为 CPU 渲染的概率很高
• 通过 @keyframes 起始帧必须在 opacity 动画中明确写出 opacity: 1，省略是不允许的；不然默认值会被部分安卓机型作为插值起点，首帧因而发生突变

难点其实不在于知道应使用 transform 和 opacity，而是找出哪个父元素暗中添加了 will-change: scroll-position，也要查出哪行 SCSS mixin 嵌套了 backface-visibility: hidden，致使原本能够合成的元素重新落回主线程。要揪出这类问题，通常只能在 Layers 面板中逐层展开排查。