由 pnpm docs:lessons 生成。内容源：src/data/performance.json；生成与共同合同：scripts/generate-performance.mjs。本页包含教师参考答案。
定位 Layout shifts 的来源。布局偏移要同时记录移动的元素和触发移动的内容。截图与 Layout shifts 能把位置变化对应到时间。
位移的元素可能是受害者，未必是根因。
图片 aspect-ratio / 宽高和固定占位可以提前保留尺寸。
hadRecentInput=true 的偏移不计 CLS；本页显示原始条目与几何变化，不把条目简单相加当 CLS。
切换图片占位、广告和字体条件。先预测输入变化会影响哪个阶段；只改变一个条件，比较输出与观察范围；将模型线索对应到真实录制。模型不计实战完成。
加载中的图片或晚到的促销条把按钮推到别处。
- 从课程准备商城；固定视口、CPU / Network 与缓存条件，再开始录制。
- 开始录制后运行故障，等待至少 700ms 的异步内容出现，不再点击页面。
- 查看 Layout shifts 的截图、受影响节点与 hadRecentInput；比较按钮移动前后 top。
- 保持视口固定后复测；确认不再发生目标几何偏移，并检查小屏内容可读。
- 保存故障与对照证据；错误方案不能记录修复。
- 回教程选择原因、证据与验证，并记录测量条件和不确定范围。
定位新的偏移并验证变化。输入与故障随机变化；可能再次抽到同一类。
| 配置 | 根因 | 证据 | 针对性验证 |
|---|---|---|---|
| 配置1 | 图片加载前未保留尺寸 | 图片出现后按钮 top 改变，LayoutShift sources 包含邻接内容 | 为主图预留正确比例 |
| 配置2 | 促销条异步插入且未保留高度 | 促销条从 0 高度变成可见高度，按钮随后移动 | 为促销条预留稳定区域 |
| 干扰项 | 只凭总耗时或颜色猜测 | 没有与本次操作对应的实际证据 | 改变所有条件且不复测 |
- 先区分加载、交互、稳定性和绘制成本，不把所有慢归给网络。
- 查看 Layout shifts 的截图、受影响节点与 hadRecentInput；比较按钮移动前后 top。
- 比较两种解释：图片加载前未保留尺寸；促销条异步插入且未保留高度。保持输入与条件一致，再核对针对性对照。
正常结果要保持 SKU、数量与业务校验值一致；对照只改变本课对应成本。先固定条件再录制，停止录制后保存 trace；恢复限速、Rendering 高亮和媒体模拟。CPU / 帧率结果按实际观测和多轮趋势解释，不能把课堂耗时当线上目标。