由 pnpm docs:lessons 生成。内容源：src/data/performance.json；生成与共同合同：scripts/generate-performance.mjs。本页包含教师参考答案。
捕获、放慢并检查动画时序。Animations 可以捕获 CSS 动画、transition 和 Web Animations；时间线用于检查实际时长、延迟与分组。
先打开 Show Animations，再触发动作；可以减速、暂停和重放。
本页暂停与重放控制真实 CSSAnimation；它们不操作 DevTools 本身。
prefers-reduced-motion 需要实际媒体条件验证；站内预览与系统偏好分开标注。rAF 动画不属于当前 Animations 捕获范围。
改变时长、延迟和运动属性。先预测输入变化会影响哪个阶段；只改变一个条件，比较输出与观察范围；将模型线索对应到真实录制。模型不计实战完成。
加购与侧栏动画持续过久，或在减弱动态预览中仍明显移动。
- 从课程准备商城；固定视口、CPU / Network 与缓存条件，再开始录制。
- 先打开 Animations，再执行目标操作；查看分组、duration、delay，尝试减速与重放。
- 对照方案后检查最终购物车与侧栏状态；本页也可暂停、重放真实动画。
- 在 Rendering 模拟 prefers-reduced-motion: reduce 再复测。站内预览只是辅助，不证明系统设置已改变。
- 保存故障与对照证据；错误方案不能记录修复。
- 回教程选择原因、证据与验证，并记录测量条件和不确定范围。
修复问题并验证 reduced motion。输入与故障随机变化；可能再次抽到同一类。
| 配置 | 根因 | 证据 | 针对性验证 |
|---|---|---|---|
| 配置1 | 加购与侧栏动画时长过长 | CSSAnimation 的 duration 为 1600ms | 缩短关键动画时长并保持最终状态 |
| 配置2 | 减弱动态条件下没有抑制位移动画 | 减弱动态预览或媒体条件 reduce 下仍有运动中的动画 | 为 reduce 提供无位移反馈，保留功能 |
| 干扰项 | 只凭总耗时或颜色猜测 | 没有与本次操作对应的实际证据 | 改变所有条件且不复测 |
- 先区分加载、交互、稳定性和绘制成本，不把所有慢归给网络。
- 对照方案后检查最终购物车与侧栏状态；本页也可暂停、重放真实动画。
- 比较两种解释：加购与侧栏动画时长过长；减弱动态条件下没有抑制位移动画。保持输入与条件一致，再核对针对性对照。
正常结果要保持 SKU、数量与业务校验值一致；对照只改变本课对应成本。先固定条件再录制，停止录制后保存 trace；恢复限速、Rendering 高亮和媒体模拟。CPU / 帧率结果按实际观测和多轮趋势解释，不能把课堂耗时当线上目标。