运动页面性能分析 是做什么的？
运动质量是可衡量的。“感觉流畅”和“看起来接近参考”是主观的说法；这个技能能将它们转化为你下周也能重复复现的数字。
两个核心任务：
- 性能分析： 每一帧花费的时间、页面的重量以及页面在设备处理缓慢时的自适应能力。指南：references/performance.md。工具：scripts/frame-meter.js。
- 参考评分： 页面与参考页面或自身设计目标的接近程度，进行公正判断。指南：references/reference-grading.md。工具：scripts/compare-sheet.mjs。
快速开始
测量任意页面的帧时间
引入计量工具并通过 ?meter 参数打开页面：
<script src="frame-meter.js" defer></script>
一个小型读数器会显示 p50、p95 和建议的质量等级，同时控制台每五秒会记录一次摘要。你也可以在控制台中运行：
frameMeter.start(); // 开始一次新的测量
// ...滚动页面，执行关键交互...
frameMeter.report(); // { frames, p50, p95, p99, max, fps, longFrames, jank, suggest }
请在你想支持的最慢设备上进行测量，而不是在你的工作站上。测量期间，请完整滚动页面并使用主要交互，因为空闲帧会隐藏掉那些昂贵的耗时操作。
创建并排对比表
node scripts/compare-sheet.mjs ./shots/ours ./shots/reference ./compare --labels "Ours,Reference"
该命令会配对相同文件名的图片，生成 compare.html（总是生成）和 compare.png（当安装了 sharp 库时）。按照评分指南中的描述，将对比表交给评分员。
关键指标
| 指标 | 目标值 | 说明 |
|---|---|---|
| 帧时间 p95 | 在目标设备上 ≤ 16.7 毫秒（60 Hz） | p95 是用户能真实感受到的；中位数会隐藏卡顿 |
| 帧时间 p50 | 远低于 p95 | 差距大意味着突刺：资源上传、垃圾回收、着色器编译 |
| 长帧（超过 50 毫秒） | 滚动时为零 | 每一个长帧都是一次可见的卡顿 |
| 首屏页面重量 | 小于 3 MB | 移动数据环境下的第一印象 |
| 整个页面 | 小于 10 MB | 加载时间、数据流量、电池消耗 |
| 最大内容绘制 (LCP) | 小于 2.5 秒 | 在重型资源到达前显示一个已合成的静态画面 |
| 累积布局偏移 (CLS) | 小于 0.1 | Canvas 和视频容器必须预留其空间 |
| 下次绘制的交互延迟 (INP) | 小于 200 毫秒 | 重型渲染循环不能阻塞用户输入 |
关于每种资源类型的预算细节和可工作的质量阶梯，请参考 references/performance.md。
工作流程
- 基准测试。 使用
?meter参数加载页面，从上到下滚动两次，执行主要交互，然后读取frameMeter.report()。记录设备、浏览器、视窗和各项数值。 - 定位昂贵区域。 对每个区域重复：通过
frameMeter.start()开始测量，完成交互后使用report()。最差的 p95 值对应的区域就是需要优化的地方。 - 修复问题。 通常是以下原因之一：设备像素比过高、全分辨率后期处理通道、过多绘制调用、滚动过程中上传纹理、首次视图时编译着色器、或在页面隐藏时进行渲染。请参见性能指南中的修复表格。
- 添加质量阶梯。 即使是一个快速的页面，也需要在弱手机上有一个降级方案。使用滚动阶梯代码片段：当 p95 超过 22 毫秒时降级，低于 12 毫秒时升级。
- 以相同方式重新测量。 相同设备、相同路径、相同持续时间。报告优化前后的结果。
- 与目标进行评分。 当页面需要再现设计稿或参考外观时，创建四时刻对比表并按照 references/reference-grading.md 中的三方评分法运行。
报告格式
页面: <名称> 设备: <型号, 浏览器> 视窗: <宽 x 高, DPR>
路径: 完整滚动 x2 + 主要交互, 60 秒
优化前: p50 9.8 毫秒, p95 31.2 毫秒, 长帧 6, 重量 14.1 MB
优化后: p50 7.1 毫秒, p95 15.9 毫秒, 长帧 0, 重量 8.7 MB
变更: 手机端 DPR 上限设置为 1.5, 泛光效果以半分辨率渲染, 英雄纹理转换为 WebP 2048 规格, 着色器在加载器中预编译
阶梯: 等级 0 到 3, 桌面端稳定在等级 3, 测试手机稳定在等级 2
规则
- 报告 p95，而非平均 FPS。 平均 58 fps 可能会隐藏每秒一次的卡顿。
- 每个数据点对应一个设备类别。 切勿将笔记本电脑和手机的数据混在一个结论中。
- 每次测试路径相同。 只有当滚动路径、交互和持续时间都一致时，测量结果才具有可比性。
- 同时测量冷启动。 首次视图会编译着色器和上传纹理，这是长帧的常见来源。
- 基于证据评分。 “接近”的结论需要基于匹配时刻的对比表，并且评分员不应是该页面的开发者。
相关内容
- 代码审查标准和阻塞性 QA 检查：../motion-review/SKILL.md。
- 制作工作流和技术库：../motioncraft-builder/SKILL.md。