由 pnpm docs:lessons 生成。内容源：src/data/performance.json；生成与共同合同：scripts/generate-performance.mjs。本页包含教师参考答案。
录制加载与运行，选区、截图并保存 trace。有效录制需要明确起止、动作和环境；先缩小到故障，再比较相同条件的对照。
Record and reload 观察加载；Record 用于已有页面的操作。
User Timing 标记是应用提供的定位线索，不能代替 Main 和截图证据。
选区、Screenshots、CPU / Network 条件及页面可见性影响解释；保存 trace 后记录复现条件。
对应动作、截图和 Main 轨道。先预测输入变化会影响哪个阶段；只改变一个条件，比较输出与观察范围；将模型线索对应到真实录制。模型不计实战完成。
搜索录制很长，多个动作和重复渲染混在一起。
- 从课程准备商城；固定视口、CPU / Network 与缓存条件，再开始录制。
- 保持 CPU / Network 条件，开启 Screenshots，点击 Record 后只执行一次目标操作。
- 在 Timings 找到 devtools:28 标记，缩小选区，对照 Main 和结果截图。
- 停止录制，用 Performance 的保存入口导出 trace；本页导出的观察 JSON 不是 Chrome trace。
- 保存故障与对照证据；错误方案不能记录修复。
- 回教程选择原因、证据与验证，并记录测量条件和不确定范围。
提交覆盖故障且少干扰的录制。输入与故障随机变化；可能再次抽到同一类。
| 配置 | 根因 | 证据 | 针对性验证 |
|---|---|---|---|
| 配置1 | 一次点击重复执行搜索 | 两个以上 search 标记与重复调用 | 去掉重复搜索，用一次操作重新录制 |
| 配置2 | 一次结果重复渲染 | 一个 search 但 renderResults 多次 | 只提交一次渲染，保持相同搜索结果 |
| 干扰项 | 只凭总耗时或颜色猜测 | 没有与本次操作对应的实际证据 | 改变所有条件且不复测 |
- 先区分加载、交互、稳定性和绘制成本，不把所有慢归给网络。
- 在 Timings 找到 devtools:28 标记，缩小选区，对照 Main 和结果截图。
- 比较两种解释：一次点击重复执行搜索；一次结果重复渲染。保持输入与条件一致，再核对针对性对照。
正常结果要保持 SKU、数量与业务校验值一致；对照只改变本课对应成本。先固定条件再录制，停止录制后保存 trace；恢复限速、Rendering 高亮和媒体模拟。CPU / 帧率结果按实际观测和多轮趋势解释，不能把课堂耗时当线上目标。