102.3K+下载
跳转到使用指南
Animation Performance作者 Emil Kowalski

Animation Performance Skill.

找出现有网页动画掉帧的原因。Animation Performance 引导你的编码代理检查渲染开销、繁忙的主线程工作和逐帧更新,并为每项建议的修改给出对应原因。

  • 网页动画
  • 帧性能
  • 诊断审查
下载 OpenDesign查看使用指南
源码审查 · animation-performanceSKILL.md
任务 动效与视频 产出 • 动画元素、驱动方式和属性清单 • 基于原因的发现,附文件位置和 修改前后对照建议 • 明确区分代码检查与设备录制的证据 开始之前 需要动画源码和可复现的交互;还需要浏览器性能分析工具和真实的目标设备来验证性能。
编辑摘要 · 已审查源码 2026-10-12 · 非生成的示例

01 功能介绍

追查掉帧背后的开销

此工作流程来自固定版本的源码描述,并非实际运行记录或基准测试。

基于源码的工作流程不是执行基准测试

工作方法

同一个标签指示器在空闲时可能很流畅,但在导航期间却会卡顿。该技能区分两个问题:每一帧触发了多少渲染工作,以及动画驱动是否与主线程上的其他工作相互争用。它从属性和驱动方式入手,而不是默认添加 GPU 提示。

源码还检查了一些不太明显的路径:每帧一次的 React 状态更新、在大型子树中变化的继承 CSS 变量、开销较大的模糊效果,以及 Motion 的简写 transform。建议与代码相关联,并受浏览器和设备行为的限定;快速的桌面设备不被视为修复有效的证明。

预期交付物

  • 动画元素、驱动方式和属性清单
  • 基于原因的发现,附文件位置和 修改前后对照建议
  • 明确区分代码检查与设备录制的证据
查看示例提示词

从输入到发现

  1. 01
    盘点范围内的动效

    列出每个元素、动画驱动和属性,以及导航或水合等同时进行的工作。在判断开销之前,先展开宽泛的 transition 和库的简写写法。

  2. 02
    找出可能的原因

    先检查布局和绘制工作,再检查主线程争用、逐帧 React 渲染和样式重新计算。把每项建议的修改与具体路径关联起来,而不是笼统地称为优化。

  3. 03
    分析真实交互

    使用浏览器性能录制来检查掉帧和长任务。尽可能在真实的目标手机上检查;桌面 CPU 节流无法重现较弱的 GPU 或设备的内存限制。

  4. 04
    报告结果与验证范围

    提供文件位置、原因和 修改前后对照建议,并按预期开销排序。说明哪些是从代码推断的、哪些是实测的,然后等待授权再应用修复。

02 适用场景

适用场景

适用于负载下卡顿或变慢的网页动效。它关注每一帧能否及时完成，而不是挑选更好看的动画。

适合的情况

  • 导航期间的动效标签指示器、页面过渡以及与加载相关的动效,可能与路由切换、水合或长任务相互争用。
  • 随内容增多而变慢的抽屉当拖动在少量条目时正常、列表变长后就变差时,检查继承变量、重复的样式计算以及过多的动画节点。
  • 手写的 React 动画找出帧、指针或滚动处理函数中的状态更新,这些更新使 React 的渲染频率超出了效果所需。

需要检查的限制

  • 不是缓动或时序设计工具选择曲线、时长,或判断界面中是否应该有动效,不属于该技能狭窄的性能职责范围。
  • 针对网页,而非 React Native源码面向浏览器渲染和网页动画驱动。React Native 的线程行为由仓库中另一个技能处理。
  • 不保证获得加速浏览器版本、属性和图层决策都会影响加速。请保持布局正确,并在目标设备上验证,而不是承诺某个帧率。

请准备这些输入

  • 可复现的交互准确描述卡顿出现的时机:打开抽屉、切换路由,或在数据加载后拖动。并说明复现所需的内容量。
  • 动画与组件代码提供 CSS、驱动或库的版本、动画属性以及相关的状态处理函数。同时包含同一时间运行的其他工作。
  • 目标浏览器与设备如果已知,请说明受影响的浏览器、设备和刷新率。如有性能录制请一并提供,并将其与主观感受区分开来。

03 关键决策

关键决策

  1. 渲染开销优先于图层提示

    在能保持预期行为的情况下,源码优先选择 transform 和 opacity。改变布局、重绘效果和宽泛的 transition 都需要明确审视。

  2. 负载下驱动方式很重要

    requestAnimationFrame 循环需要主线程。CSS 或 Web Animations API 效果对符合条件的属性可能使用加速路径,但仍需检查浏览器的实际行为。

  3. 小段代码模式可能影响整个子树

    继承的自定义属性或重复的状态更新,可能让简单的移动变得开销很大。审查会沿着这些更新路径追查,而不是假定仅使用 transform 就能让效果开销很低。

04 从一个具体需求开始

从一个具体需求开始

下面的示例提示尚未经过测试。使用前请先检查该技能的安装设置。

检查安装设置

从 Emil Kowalski 的公共技能仓库安装,并为你的代理选择此技能。

带范围的安装命令
npx skills@latest add emilkowalski/skills --skill animation-performance

README 记录了使用 npx skills@latest add emilkowalski/skills 安装仓库的方法。下面带范围的命令用于选择此条目。运行 npx 需要 Node.js/npm;源码未固定最低版本。运行前请查看上游说明。

复现一个卡顿的交互

此示例提示为原创且未经测试。请将其中的组件和环境细节替换为你项目的实际情况。

示例提示
使用 animation-performance 审查我们网页仪表盘的抽屉,它在路由加载时会卡顿,并且在有 60 个列表项时更糟。阅读现有的 CSS 和 React 处理函数,但不要修改它们。列出涉及的动画属性、驱动方式、状态更新和自定义属性。提出能解决某个明确原因的最小改动,同时保持布局、手势中断和减少动态效果的行为。如果可以访问浏览器,请分别用 5 个和 60 个合成条目录制交互,并检查长任务和每帧完成情况。说明所用的浏览器和设备。不要基于仅在桌面端的录制声称移动端性能有所提升,不要默认添加 will-change,并在报告后停止。

修复前先审查证据

对照代码和实际浏览器行为检查报告。将未经验证的观察与已复现的故障分开。

  • 每项建议的修改都会指明渲染或更新路径方面的原因以及源码位置。
  • 修改前后的对比结论使用可比较的录制交互;未测量的设备行为会被明确标注。
  • 建议的优化会保持预期的布局和交互,而不只是在孤立情况下看起来更流畅。

OpenDesign 为编码代理提供本地设计工作区。此列表并不意味着该技能已捆绑,也不意味着其外部工具、凭据和软件依赖已包含在内。

下载 OpenDesign阅读快速入门

05 源码与许可证

源码与许可证

本页描述的是下方链接的固定源码版本。上游的行为和要求可能会变化。

源码所有者
Emil Kowalski
仓库
emilkowalski/skills
技能文件
skills/animation-performance/SKILL.md
许可证
MIT
已审查的快照
2026-10-12 · 2d228630ba14
编辑版源码摘要
诊断网页动画中的掉帧:渲染开销、主线程争用、逐帧 React 更新和继承的 CSS 变量。这是对固定版本源码的编辑摘要,不是执行报告。

由 OpenDesign 基于所链接的源码撰写的原创摘要。仓库星标数是带日期的热度信号,不代表技能使用量或质量评分。

06 开始前的常见问题

开始前的常见问题

是否应该把所有动画都改用 CSS 重写?

不需要。源码认为 JavaScript 库在弹簧效果、共享布局效果、手势和中断方面仍然有用。它关注的是所选的驱动方式和属性能否在负载下满足交互的需求。

添加 will-change 能解决掉帧吗?

通常不能。源码将其视为在找出相关问题之后采取的针对性措施;额外的图层会占用内存,而且该提示既不能消除布局工作,也不能解除繁忙主线程的阻塞。

流畅的桌面录制就足够了吗?

不够。在判断移动端性能时,源码要求提供真实设备的证据。CPU 节流对排查有用,但无法重现手机的 GPU 或内存限制。

Animation Performance 技能

找出卡顿背后的性能开销

选择一个可复现的交互,追查其帧开销,并在目标设备上验证修改。代码层面的建议只是起点,而不是性能基准测试。

下载 OpenDesign浏览设计技能
带范围的安装命令
npx skills@latest add emilkowalski/skills --skill animation-performance