HTTP 缓存

1 本质

缓存 = 先问本地有没有还能用的副本，再决定是否打扰服务器。

为何学：少等一轮网络，页面更快；也解释「我改了文件怎么还不生效」。

2 骨架

flowchart LR
  A[发起请求] --> B{本地有缓存?}
  B -->|无| C[完整请求服务器]
  B -->|有| D{还新鲜?}
  D -->|是| E[直接用本地]
  D -->|否| F[条件请求 If-None-Match]
  F --> G{服务器}
  G -->|变了| H[200 + 新 body]
  G -->|没变| I[304 继续用本地]
  C --> H
        

3 动画

占位时间线（日后可换成 ≤90s 视频 / HyperFrames 导出）。点「播放」跟节点。

4 要点

• Cache-Control：告诉浏览器「能存多久、能不能存」。
• Expires：旧式过期时间；现代优先看 Cache-Control。
• ETag：资源指纹；条件请求用来问「变了没」。
• 304：没变，继续用本地——省的是传输，不是魔法。
• 新鲜命中 = 往往零网络 body；陈旧才可能再问服务器。
• 调试「不生效」：先看响应头里的缓存指令，再硬刷新。

5 小测 · 3 题

6 补洞

错哪题就只看对应碎片，不重开长讲。

• 新鲜命中：本地副本仍在 max-age 内 → 直接用，默认不下载 body。回看 骨架「新鲜 → 直接用」。
• 304：条件请求后服务器说 Not Modified → 继续用本地缓存。回看 要点 · ETag / 304。
• 费曼卡壳：按箭头说：请求 → 本地有无 → 新鲜？→ 用本地 / 条件请求 → 200 或 304。再播一遍 动画。

7 下一步