由 pnpm docs:lessons 生成。内容源：src/data/performance.json；生成与共同合同：scripts/generate-performance.mjs。本页包含教师参考答案。
读懂火焰图、长任务、Self/Total、Bottom-up、Call tree。火焰图横向表示时间，纵向表示调用嵌套。Total 包含后代，Self 不含后代；聚合表回答不同的问题。
Call tree 从入口追路径；Bottom-up 从成本回溯调用者。
父函数宽可能只是子函数昂贵；不能把父子 Total 相加。
Self 高和次数多是两类问题；确认结果一致后分别减少单次工作或重复调用。
比较嵌套调用的聚合视角。先预测输入变化会影响哪个阶段；只改变一个条件，比较输出与观察范围；将模型线索对应到真实录制。模型不计实战完成。
商品筛选结果正确，计算却占用主线程。
- 从课程准备商城；固定视口、CPU / Network 与缓存条件，再开始录制。
- 录制一次筛选，选中 filterCatalog 下的 normalizeProduct。
- 分别使用 Call tree 和 Bottom-up，对照 Self / Total 与调用次数。
- 改一个条件，核对 SKU、数量和校验值不变，再以相同条件复测。
- 保存故障与对照证据；错误方案不能记录修复。
- 回教程选择原因、证据与验证，并记录测量条件和不确定范围。
决定优化函数自身还是调用次数。输入与故障随机变化；可能再次抽到同一类。
| 配置 | 根因 | 证据 | 针对性验证 |
|---|---|---|---|
| 配置1 | normalizeProduct 自身包含昂贵计算 | normalizeProduct / consumeCPU 采样集中，单次归一化耗时高 | 缓存稳定归一化结果，减少单次计算 |
| 配置2 | 同一 normalizeProduct 被重复调用 | Call tree 出现六次调用，单次成本较小但累计高 | 复用同一结果，避免重复调用 |
| 干扰项 | 只凭总耗时或颜色猜测 | 没有与本次操作对应的实际证据 | 改变所有条件且不复测 |
- 先区分加载、交互、稳定性和绘制成本，不把所有慢归给网络。
- 分别使用 Call tree 和 Bottom-up，对照 Self / Total 与调用次数。
- 比较两种解释：normalizeProduct 自身包含昂贵计算；同一 normalizeProduct 被重复调用。保持输入与条件一致，再核对针对性对照。
正常结果要保持 SKU、数量与业务校验值一致；对照只改变本课对应成本。先固定条件再录制，停止录制后保存 trace；恢复限速、Rendering 高亮和媒体模拟。CPU / 帧率结果按实际观测和多轮趋势解释，不能把课堂耗时当线上目标。