问题探讨：如“为什么我的CSS动画在手机上卡顿？排查记录

事情是这样的：上线前用 Chrome DevTools 的设备模拟器看动画流畅得不得了，结果一到真机，尤其是那种用了两三年、电池健康度掉到 80% 的老安卓机上，动画直接变成 PPT。

这种“模拟器没事、真机拉胯”的幽灵卡顿，排查起来比写动画本身要痛苦得多，有时甚至怀疑是手机厂商的系统优化问题。

如果让我复盘一次典型的排查过程，大概会经历下面这几个阶段。

排查第一阶段：先查有没有触发“合成器”快车道

动画不一定非要靠 JS 去逐帧计算。最理想的状态是，整段动画只触发 `composite`（合成）阶段，依靠 GPU 把图层合成到屏幕上，这样能最大化利用主线程的空闲时间。

如果你的 CSS 里写了这两类属性，基本就和“GPU 合成”无缘了：

1. 激怒重排的属性：比如 `top`、`left`、`width`、`margin`。每一次更新这些值，浏览器都得先重新计算布局，再走一遍渲染流程。手机上，GPU 带宽本来就紧张，重排一次就能让主线程卡个十几毫秒。
2. 频发重绘的属性：比如 `color`、`background`、`box-shadow`。这些不触发布局，但会导致整个图层重新绘制。尤其是 `box-shadow`，在低端机上能把 GPU 刷爆。

建议操作：把 `top/left` 换成 `transform: translate()`，把 `width/height` 换成 `transform: scale()`，把 `opacity` 留给透明度动画。如果之前确实用了这些属性，换完通常能解决 70% 的肉眼可见卡顿。

排查第二阶段：警惕“隐形的图层滥用”

以为换成 transform 就万事大吉了？还不一定。

有个反直觉的坑：**乱加 `will-change` 或者无脑 `translateZ(0)` 强制层提升，在某些安卓机型上反而更卡。**

因为每生成一个合成层，都要占用一块显存内容。如果一个页面上有几十个元素被强行提升为独立图层，内存占用直接上涨，压缩了 GPU 的可用带宽，最终导致碎片化卡顿。

排查方法是在 DevTools 里开启 Layers 面板，看一下当前页面有多少个合成层、哪些元素的面积异常大。如果发现有些元素加了 `will-change: transform` 却压根没在做动画，果断去掉。不是每个属性都在动，就不需要给它单独开层。

排查第三阶段：检查全屏的 `backdrop-filter` 和模糊效果

现代设计师很喜欢用毛玻璃效果。iOS 上写一个 `backdrop-filter: blur(20px)` 看起来毫无压力，但安卓阵营的 Chrome 对全屏毛玻璃的优化做得并不理想。

一旦动画元素位于一个拥有 `backdrop-filter` 的全屏父容器里，每次动一像素，浏览器底层都要把整个背景实时模糊采样一遍。这种实时采样可不是什么便宜操作——在部分中端机上直接掉帧到个位数。

遇到这类情况，如果动画必须保留，可以考虑在动画过程中加个 class，暂时关掉容器的毛玻璃效果；或者在动画结束后再渲染模糊区域，避免为几乎察觉不到的模糊细节付出整段动画的帧率代价。

排查第四阶段：找出 JS 里的“定时炸弹”

如果以上属性都排查过了，动画还是卡的。这时再看看是不是 JS 端在做同步操作。

常见的问题是这样：

const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.style.transform = `translateY(${scrollY}px)`;
});

这里的关键是不要在一个高频率事件监听器里去强制刷新样式或者批量改 DOM。当你用了类似 `scroll` 或 `touchmove` 事件，尤其是还用了 `window.scrollY` 时，浏览器每次回调前都会强制同步计算样式。如果在回调里再改变样式，就又产生了布局抖动（Layout Thrashing）。

比较理想的方案是让 JS 只负责更新一个状态变量，然后通过 `requestAnimationFrame` 去分配给浏览器渲染管线的下一帧，或者干脆交给 CSS 变量去驱动。

最后的忠告：真机测试才是终点

模拟器的性能调优，很多时候像在水里打太极，参考价值有限。手机上卡顿的原因除了纯 CSS 渲染层面，还会受页面后续的加载资源、图像解压、甚至是发热降频影响。

跑代码性能剖析时，打开真机的“开发者选项”>“GPU 渲染模式分析”，如果看到绿色柱状条一柱擎天，说明渲染流程出问题了。

如果你也在某个凌晨遇到这种问题，先别急着换框架。按 `transform/opacity`、合成层数量、模糊滤镜、JS 退出耗时这条路径去挨个挖，大概率能挖出妖怪。别忘了，渲染性能的背后，本质上是一场关于“什么在动、什么在重新画”的妥协游戏。