移动端 CSS 动画卡顿时如何排查 transform 属性
移动端网页 CSS 动画卡顿时，应优先检查是否使用了改变元素几何位置的属性，而非 transform 属性。
排查动画卡顿的渲染流水线顺序
浏览器在处理 CSS 动画时，会将页面更新过程分解为一系列步骤，这些步骤必须在一个帧周期内完成。当动画导致页面卡顿时，通常是因为某个步骤耗时过长，超出了浏览器分配的 16.7 毫秒时间窗口。为了定位问题，需要按照渲染流水线的顺序进行检查：首先检查是否触发了样式重新计算，接着检查是否触发了布局，最后检查是否触发了重绘。如果动画卡顿，往往是因为触发了布局或重绘，导致浏览器无法在规定时间内完成所有操作。
移动端设备性能有限，且屏幕刷新率通常为 60 帧/秒，这意味着浏览器每帧仅有约 16.7 毫秒的时间来执行脚本、重新计算样式、布局以及重绘。如果动画修改了某些属性，导致浏览器必须执行布局或重绘操作，而这些操作耗时超过了这个时间窗口，就会造成帧率下降，表现为动画卡顿。因此，排查卡顿的第一步是确认动画修改了哪些属性，并判断这些属性是否属于昂贵属性。
昂贵属性与 transform 属性的性能差异
并非所有 CSS 属性的修改都会导致同样的性能开销。有些属性会改变元素的几何位置或尺寸，这会触发样式重新计算、布局和重绘，被称为昂贵属性。例如，修改 left、max-width、border-width 或 margin-left 等属性，都会强制浏览器重新计算元素的位置和几何形状，从而消耗大量性能资源。在移动端网页上，频繁修改这些属性极易导致动画卡顿。
相比之下，transform 和 opacity 属性属于性能优化属性。修改 transform 属性通常只触发样式重新计算，而不会触发布局或重绘。如果元素被单独提升到了合成层，修改 opacity 属性甚至不需要触发重绘，仅由合成层处理。这意味着使用 transform 和 opacity 进行动画，可以给浏览器更多的控制权，让浏览器在必要时直接丢弃帧而不影响显示，从而保持流畅的帧率。
使用开发者工具验证帧率与渲染步骤
现代浏览器内置了性能分析工具，可以用来诊断动画卡顿的原因。在 Chrome 或 Firefox 的开发者工具中，打开性能监控面板，然后开始录制动画过程。在录制结束后，查看火焰图或时间轴，可以清晰地看到每一帧的执行情况。如果某一帧的耗时超过了 16.7 毫秒，或者出现了长条形的阻塞，就说明该帧发生了性能瓶颈。
在性能分析结果中，可以进一步查看具体的渲染步骤。如果发现动画过程中频繁出现了“布局”或“重绘”的标记，且持续时间较长，那么问题很可能出在修改了昂贵属性上。此时，应检查动画代码，尝试将昂贵属性替换为 transform 或 opacity 属性。通过对比修改前后的帧率曲线，可以验证排查结果是否有效，确认是否通过优化属性选择解决了卡顿问题。
将昂贵属性替换为 transform 属性的操作步骤
如果排查发现动画使用了 left、top、width 或 height 等昂贵属性，可以通过以下步骤进行优化。首先，在代码中找到定义动画关键帧的 CSS 规则，识别出正在修改昂贵属性的部分。然后，将这些属性替换为 transform 属性。例如，将 `left: 0` 替换为 `transform: translateX(0)`，将 `width: 100px` 替换为 `transform: scaleX(1)`。需要注意的是，transform 属性可以组合使用，如 `translate` 和 `scale`，但应避免同时使用 translate 和 left 等定位属性。
完成属性替换后，重新加载页面并运行动画。再次使用开发者工具的性能面板进行录制和分析，观察帧率曲线是否变得平滑，以及是否不再出现布局或重绘的阻塞。如果帧率稳定在 60 帧/秒左右，且渲染步骤中不再出现昂贵的操作，说明优化成功。通过这种方法，可以确保移动端网页的动画保持流畅，提升用户体验。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。