由 pnpm docs:lessons 生成。教学脚本在 src/data/network-state.json，合同补充在 scripts/generate-network-state.mjs。本页含教师参考答案。
理解 HTTP 缓存、条件请求、304 和 Disable cache。先修按 完整目录 的章节关系；基础操作、原理关系随本课讲解。
HTTP 缓存与页面状态、Service Worker 缓存是不同层；先确认响应来自哪里。
max-age 允许新鲜期内直接复用；no-cache 要验证，并非禁止保存
ETag 与 If-None-Match 一致时可返回 304；fetch 可能看到合并后的 200
Disable cache 仅在 DevTools 打开时作用；它不等于清除 Cache Storage
改变响应头与版本观察缓存。模型不改变真实浏览器设置，不计为实战完成。
- 先预测一个条件变化的结果。
- 只改变一个条件，比较输入与输出。
- 将模型中的关系对应到真实 DevTools。
症状：服务端价格更新到版本 2，页面还显示版本 1。
正常结果：服务发布版本 2 后页面也读取 2；条件验证可产生真实 304。
真实机制：同一 run 的同一 price.json URL；max-age/no-cache、ETag、If-None-Match。
- 从本课准备并打开独立商城；先打开 DevTools，再运行故障。
- 先取消 Disable cache，运行故障；比较 Size、Response 和价格版本。
- 勾选 Disable cache 复测，判断旧值来自 HTTP 缓存还是服务响应。
- 修复后点「条件验证」，在 Network 查看 ETag、If-None-Match 和 304；随后恢复原缓存设置。
- 先保存证据，再应用针对性的对照；错误对照不会通过页面检查。
- 回到教程选择真实证据，完成独立挑战后写下排查与恢复步骤。
区分缓存、应用状态和服务响应问题。新会话改变输入与故障配置，可能再次抽到同一类型；按实际证据判断。
| 配置 | 原因 | 证据 | 修复/验证 |
|---|---|---|---|
| 配置1 | 长 max-age 复用了旧 HTTP 响应 | 价格请求来自缓存，响应版本 1，而服务已发布 2 | 重新验证并采用合适的缓存头 |
| 配置2 | 服务端本身仍返回旧版本 | 真正网络响应仍为版本 1，禁用缓存也未改变 | 修正服务数据，再核对真实响应 |
| 干扰项 | 只凭界面颜色判断 | 没有对应请求或存储证据 | 同时改变全部条件且不复测 |
- 先区分实际请求、浏览器策略、存储与界面处理，记录第一次偏离的环节。
- 先取消 Disable cache，运行故障；比较 Size、Response 和价格版本。
- 比较两个候选解释：长 max-age 复用了旧 HTTP 响应；服务端本身仍返回旧版本。保持其他输入一致再验证。
先取消 Disable cache 再复现。fetch 看到的状态可能是浏览器合并后的 200，Network 可显示 304。
清理与会话约定见 共同合同。请在复盘写下条件、观察对象、实际值、根因、最小修改与恢复设置；将 HTTP 缓存、Cache Storage、内存状态分开。