由 pnpm docs:lessons 生成。内容源：src/data/performance.json；生成与共同合同：scripts/generate-performance.mjs。本页包含教师参考答案。
使用 Coverage，理解观察范围和按需加载。Coverage 的未使用仅针对本次录制窗口和已执行路径；应先扩大观察，再决定拆分，而非直接删除。
录制首页后进入详情和结算，使用范围会变化。
JS 与 CSS 的覆盖范围、字节和功能正确性需要分别检查。
按需加载延后请求；必须验证新路径仍可用。覆盖率变好不自动等于用户体验改善。
随操作观察覆盖范围变化。先预测输入变化会影响哪个阶段；只改变一个条件，比较输出与观察范围；将模型线索对应到真实录制。模型不计实战完成。
首页提前下载了只在详情和结算才用到的资源。
- 从课程准备商城；固定视口、CPU / Network 与缓存条件，再开始录制。
- 打开 Coverage 并从刷新开始录制，先只观察首页资源。
- 继续点击打开商品详情和打开结算页，比较 JS / CSS 的使用范围。
- 应用对照后用 Network 核对加载时机，并实际验证详情和结算正常。不要依据单次红色直接删除代码。
- 保存故障与对照证据；错误方案不能记录修复。
- 回教程选择原因、证据与验证，并记录测量条件和不确定范围。
提出按需加载并验证其他流程。输入与故障随机变化；可能再次抽到同一类。
| 配置 | 根因 | 证据 | 针对性验证 |
|---|---|---|---|
| 配置1 | 首页提前加载详情与结算模块 | 未打开详情已经请求 details.js / checkout.js，许多函数未执行 | 进入对应流程时再加载模块 |
| 配置2 | 首页提前加载只用于详情的样式 | themes.css 已下载但详情选择器未匹配首页 | 进入详情时再加载专用样式 |
| 干扰项 | 只凭总耗时或颜色猜测 | 没有与本次操作对应的实际证据 | 改变所有条件且不复测 |
- 先区分加载、交互、稳定性和绘制成本，不把所有慢归给网络。
- 继续点击打开商品详情和打开结算页，比较 JS / CSS 的使用范围。
- 比较两种解释：首页提前加载详情与结算模块；首页提前加载只用于详情的样式。保持输入与条件一致，再核对针对性对照。
正常结果要保持 SKU、数量与业务校验值一致；对照只改变本课对应成本。先固定条件再录制，停止录制后保存 trace；恢复限速、Rendering 高亮和媒体模拟。CPU / 帧率结果按实际观测和多轮趋势解释，不能把课堂耗时当线上目标。