由 pnpm docs:lessons 生成。内容源：src/data/performance.json；生成与共同合同：scripts/generate-performance.mjs。本页包含教师参考答案。
关联 Performance 与 Network 分析关键路径。发现资源、请求传输、解码和呈现属于不同阶段；改善一个阶段不保证改善整个关键路径。
先看请求何时发起，再看收到资源后何时呈现。
Initiator 与 Timings / Main 一起看，区分无关依赖与渲染阻塞。
LCP 候选应检查真实元素；本页的请求与呈现间隔是取证线索，不冒称完整 LCP 分解。
改变主图发现、请求和处理时机。先预测输入变化会影响哪个阶段；只改变一个条件，比较输出与观察范围；将模型线索对应到真实录制。模型不计实战完成。
主图最终能显示，但首屏关键内容出现很晚。
- 从课程准备商城；固定视口、CPU / Network 与缓存条件，再开始录制。
- 用 Record and reload 或先开始录制再运行故障，观察真实导航。
- 在 Network 比较 recommendations 和 hero.svg，查看 Initiator；再在 Main 关联呈现前的工作。
- 对照 requestStart、图片 load 与下一帧标记，确认改动作用在哪个阶段。
- 保存故障与对照证据；错误方案不能记录修复。
- 回教程选择原因、证据与验证，并记录测量条件和不确定范围。
用证据确定优先优化的阶段。输入与故障随机变化；可能再次抽到同一类。
| 配置 | 根因 | 证据 | 针对性验证 |
|---|---|---|---|
| 配置1 | 主图等待无关推荐接口后才发起 | recommendations 结束后才发现 hero.svg | 主图与无关推荐并行启动 |
| 配置2 | 资源已到达但呈现前执行昂贵计算 | hero.svg 已完成，之后 Main 的 CPU 工作延后插入图片 | 先呈现关键内容，将非关键计算移出关键路径 |
| 干扰项 | 只凭总耗时或颜色猜测 | 没有与本次操作对应的实际证据 | 改变所有条件且不复测 |
- 先区分加载、交互、稳定性和绘制成本，不把所有慢归给网络。
- 在 Network 比较 recommendations 和 hero.svg，查看 Initiator；再在 Main 关联呈现前的工作。
- 比较两种解释：主图等待无关推荐接口后才发起；资源已到达但呈现前执行昂贵计算。保持输入与条件一致，再核对针对性对照。
正常结果要保持 SKU、数量与业务校验值一致；对照只改变本课对应成本。先固定条件再录制，停止录制后保存 trace；恢复限速、Rendering 高亮和媒体模拟。CPU / 帧率结果按实际观测和多轮趋势解释，不能把课堂耗时当线上目标。