由 pnpm docs:lessons 生成。内容源：src/data/performance.json；生成与共同合同：scripts/generate-performance.mjs。本页包含教师参考答案。
从体验理解 LCP、INP、CLS 与测量目标。体验问题必须先转成可测量的目标。LCP 关注可见主内容，INP 关注真实交互到下一次绘制的延迟，CLS 关注非预期布局偏移。
LCP 是导航中的候选，不是按钮计时；子帧与后台页面有额外边界。
一次处理函数耗时不等于页面 INP；实验展示 Event Timing 条目与自定义耗时，分开标注。
CLS 采用会话窗口聚合，并排除 hadRecentInput；位置变化不必然计入 CLS。
改变资源、任务和布局条件。先预测输入变化会影响哪个阶段；只改变一个条件，比较输出与观察范围；将模型线索对应到真实录制。模型不计实战完成。
关键商品出现晚，搜索回应迟，页面还会突然移动。
- 从课程准备商城；固定视口、CPU / Network 与缓存条件，再开始录制。
- 录制加载并查看 LCP 候选与 Network，而不是用总耗时猜原因。
- 场景就绪后执行搜索，查看 Interactions / Main；再对照 Layout shifts。
- 记录每个目标的观察范围、候选和条件。页面上的自定义耗时不称为正式 INP / CLS。
- 保存故障与对照证据；错误方案不能记录修复。
- 回教程选择原因、证据与验证，并记录测量条件和不确定范围。
为新投诉选择测量目标。输入与故障随机变化；可能再次抽到同一类。
| 配置 | 根因 | 证据 | 针对性验证 |
|---|---|---|---|
| 配置1 | 主图发现被无关任务延后 | 主图请求启动晚，同时可观察交互和偏移 | 提前发现主图，拆除阻塞并预留空间 |
| 配置2 | 搜索处理长时间占用主线程 | 搜索任务为长任务，同时主图加载与偏移可分别观察 | 拆分交互工作，保持结果并预留空间 |
| 干扰项 | 只凭总耗时或颜色猜测 | 没有与本次操作对应的实际证据 | 改变所有条件且不复测 |
- 先区分加载、交互、稳定性和绘制成本，不把所有慢归给网络。
- 场景就绪后执行搜索，查看 Interactions / Main；再对照 Layout shifts。
- 比较两种解释：主图发现被无关任务延后；搜索处理长时间占用主线程。保持输入与条件一致，再核对针对性对照。
正常结果要保持 SKU、数量与业务校验值一致；对照只改变本课对应成本。先固定条件再录制，停止录制后保存 trace；恢复限速、Rendering 高亮和媒体模拟。CPU / 帧率结果按实际观测和多轮趋势解释，不能把课堂耗时当线上目标。