移动端 CSS 动画卡顿？检查 transform 与 opacity 属性
浏览器在渲染动画时需要执行样式计算、布局和重绘等步骤，这些步骤必须在 16.7 毫秒内完成才能保持 60 帧的流畅度。
动画卡顿的渲染原理
浏览器在执行 CSS 动画时，会将页面更新过程描述为一个渲染瀑布流，包含样式计算、布局和重绘等步骤。当元素发生动画变化时，浏览器必须重新计算样式，并使用这些样式来确定元素的位置和几何形状，最后将元素重绘到屏幕上。这个过程需要在一个帧内完成，因为屏幕只有在所有步骤完成后才会更新。如果动画修改了 CSS 属性，浏览器就需要执行这些步骤，而不同属性的修改成本差异很大。
对于移动端设备，用户期望所有界面交互都是流畅的，通常认为 60 帧每秒（fps）是动画流畅的标准。这意味着浏览器每帧只有 16.7 毫秒的时间来执行脚本、重新计算样式、进行布局（如果需要）以及重绘更新的区域。如果脚本执行缓慢或修改了昂贵的 CSS 属性，浏览器就会在达到流畅帧率时遇到困难，从而导致动画出现卡顿现象。
昂贵属性与廉价属性的差异
在渲染瀑布流的背景下，某些属性比其他属性更昂贵。影响元素几何形状或位置的属性会触发样式计算、布局和重绘。例如，修改 left、max-width、border-width、margin-left 或 font-size 等属性都会导致浏览器执行这些昂贵的操作。这些操作会消耗大量时间，容易导致帧率下降，从而引起卡顿。
相比之下，不改变几何形状且不渲染在独立图层上的属性只触发样式计算和重绘。例如，修改 color 属性就属于这一类，它不会导致布局计算，因此性能开销较小。而渲染在独立图层上的属性甚至不需要重绘，因为更新是在合成过程中处理的。例如，transform 和 opacity 属性就属于这一类，它们不会触发布局，因此对性能的影响最小。
使用 Chrome 性能工具排查
现代网页浏览器都包含工具，可以提供关于浏览器在动画页面元素时正在执行工作的洞察。使用这些工具，你可以测量应用程序的动画帧率，并在发现任何性能瓶颈时进行诊断。在移动端开发中，可以通过 Chrome 的性能工具来模拟移动设备环境，观察动画过程中的帧率变化和耗时分布。
在性能工具中，可以查看渲染瀑布流的详细步骤耗时。如果发现某个步骤（如布局或重绘）耗时过长，导致帧率低于 60fps，就可以据此定位问题。通过对比不同属性修改时的耗时数据，可以判断当前动画是否使用了昂贵的属性，并据此优化代码。
验证动画性能的检查步骤
首先，在 Chrome 浏览器中打开包含 CSS 动画的页面，并按 F12 打开开发者工具。切换到 Performance（性能）标签，点击录制按钮，然后手动触发动画。动画播放结束后，点击停止按钮，查看性能分析报告。在报告中，观察帧率曲线是否稳定在 60fps 附近，以及各个渲染步骤的耗时情况。
如果发现帧率下降或某个步骤耗时超过 16.7 毫秒，说明动画存在性能问题。此时，检查动画所使用的 CSS 属性。如果使用了 left、width、margin 等影响布局的属性，应尝试将其替换为 transform 或 opacity 等不触发布局的属性。再次运行性能分析，如果帧率恢复正常且布局步骤消失，则说明问题已解决。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。