AI 摘要：本文系统梳理网页动画性能的分级标准，从浏览器渲染管线（render pipeline）的底层原理出发，解释为何某些动画（如 transform、opacity 等）能高效运行于 GPU 的 compositor 线程，而另一些（如涉及布局、重绘的动画）则极为耗费资源。作者将动画按性能分为 S 到 F 六个等级，指出各层级的触发条件、适用场景及典型陷阱，并给出实践经验（如 will-change 的使用、CSS 变量的潜在灾难、“thrashing”问题等），帮助开发者建立动画性能直觉与优化策略。

1. 渲染管线与性能基础
• 解释浏览器渲染的三个阶段：Layout、Paint、Composite，并指出触发一个阶段会引发其后所有阶段。
• 区分主线程（main thread）与合成线程（compositor thread）的运行逻辑，说明主线程阻塞将导致动画卡顿。

2. 分级体系（Tiers）总览
• S-Tier：完全运行于 compositor 线程的硬件加速动画，性能最佳。
• A-Tier：在主线程驱动但仅触发 compositor 操作的动画。
• B-Tier：含有一次性 DOM 测量成本的动画。
• C-Tier：触发 Paint 的动画。
• D-Tier：触发布局（Layout）重新计算。
• F-Tier：存在频繁读写 DOM 的“thrashing”灾难级动画。

3. S-Tier：硬件加速动画策略
• 可在 compositor 线程执行的属性有 transform、opacity、filter、clip-path。
• 借助 CSS、Web Animations API（WAAPI）或 Motion 等库实现流畅动画。
• 滚动动画的性能优势源于滚动本身在 compositor 线程执行。
• “去优化”风险：Safari 等浏览器可能丢失硬件加速。
• GPU 图层（layer）太大易耗尽内存，滤镜（尤其是 blur）成本高昂。

4. A-Tier：主线程驱动的合成动画
• 动画触发合成层更新而非重绘，前提是元素已成为图层（如 will-change）。
• JS 动画库（如 GSAP）或 requestAnimationFrame 实现的动画多属此类。
• 利用 IntersectionObserver 可节省主线程资源并暂停不可见动画。
• 提及 Shader 动画性能超强但仍受主线程同步影响。

5. B-Tier：带有预处理的高效布局动画
• Motion 的 layout 动画使用 FLIP（First, Last, Invert, Play）技术，通过 transform 模拟尺寸变化，减少重排。
• 初始测量存在成本，但整体能显著优化动画流畅度。

6. C-Tier：触发重绘的动画与陷阱
• 改变颜色、圆角等属性触发 Paint，相比几何变化轻一些。
• 警惕 CSS 变量（CSS Variables）导致不可预测性能开销：尤其全局继承时全树样式重算。
• 优化策略：缩小变量作用域或用 @property 禁止继承。
• SVG 属性动画与 View Transition API 动画的性能权衡与实践改进。

7. D-Tier：布局驱动的高成本动画
• 改变 width、margin、grid-template-columns 等属性会引发重布局。
• 使用 position: absolute/fixed 或 contain CSS 属性可减少布局范围。

8. F-Tier：性能“地狱”——样式与布局 Thrashing
• 反复读写 DOM 尺寸（如 offsetWidth）导致强制同步布局。
• 建议通过批量化读写（如 Motion 的 frame API）避免 thrashing 问题。

9. 结论
• 动画性能优化不止是“黑魔法”，而是一门平衡内存、渲染步骤与硬件加速的艺术。
• 理解渲染管线可让开发者具备判断性能瓶颈的直觉，S 级动画不代表无代价，关键是为实际体验做正确取舍。

motion.dev

The Web Animation Performance Tier List - Motion Blog

Learn what makes web animations fast, slow, and everything in between with our 2025 web animation performance tier list.