由 pnpm docs:lessons 生成。内容源：src/data/performance.json；生成与共同合同：scripts/generate-performance.mjs。本页包含教师参考答案。
理解样式、布局、绘制、合成与 Rendering。样式、布局、绘制和合成是相关但不同的阶段。交错写样式再读几何可能强制同步布局。
先集中读取，再批量写入，避免一次循环反复刷新布局。
left / 阴影等变化可能需要布局或绘制；transform / opacity 通常更适合运动，但不保证零成本。
Paint flashing / Layout shift regions / Layer borders 是定位提示；是否合成以及实际成本仍需 trace。
对比布局读写和重绘区域。先预测输入变化会影响哪个阶段；只改变一个条件，比较输出与观察范围；将模型线索对应到真实录制。模型不计实战完成。
商品浮层滚动更新时频繁触发布局或重绘。
- 从课程准备商城；固定视口、CPU / Network 与缓存条件，再开始录制。
- 在 Rendering 打开 Paint flashing，录制一次浮层更新。
- 比较 Main 中 Recalculate Style / Layout / Paint，并查看触发调用。
- 页面读取计数是业务显式调用次数，不等于浏览器 Layout 事件数；以 trace 复核。
- 保存故障与对照证据；错误方案不能记录修复。
- 回教程选择原因、证据与验证，并记录测量条件和不确定范围。
区分计算、布局和绘制成本。输入与故障随机变化；可能再次抽到同一类。
| 配置 | 根因 | 证据 | 针对性验证 |
|---|---|---|---|
| 配置1 | 在每个节点上交错写宽度与读布局 | Main 出现重复 Layout，业务有多次显式几何读取 | 集中读取后批量写入，再比较 Layout |
| 配置2 | 逐帧移动 left 并更新大面积阴影 | 更新涉及 left / box-shadow，Rendering 高亮重绘区域 | 改为 transform，缩小绘制影响并复测 |
| 干扰项 | 只凭总耗时或颜色猜测 | 没有与本次操作对应的实际证据 | 改变所有条件且不复测 |
- 先区分加载、交互、稳定性和绘制成本，不把所有慢归给网络。
- 比较 Main 中 Recalculate Style / Layout / Paint，并查看触发调用。
- 比较两种解释：在每个节点上交错写宽度与读布局；逐帧移动 left 并更新大面积阴影。保持输入与条件一致，再核对针对性对照。
正常结果要保持 SKU、数量与业务校验值一致；对照只改变本课对应成本。先固定条件再录制，停止录制后保存 trace；恢复限速、Rendering 高亮和媒体模拟。CPU / 帧率结果按实际观测和多轮趋势解释，不能把课堂耗时当线上目标。