HTTP 缓存

这一课你将能做到

1. 区分强缓存（max-age 未过期直接用本地副本，不发请求）与协商缓存（带条件头问服务器「变了没」→ 常返回 304），并各自画出完整时序
2. 读懂 Cache-Control 六个常用指令与 ETag / If-None-Match、Last-Modified / If-Modified-Since 两对搭档
3. 在 DevTools 用 Size 列（disk/memory cache）、304 与 Disable cache 开关，解释「两次刷新为什么快慢不同」，并为静态资源与 API 各写一条可上线的缓存策略

为什么要学

每次打开 /tracks 都把 JS/CSS 完整下载一遍，又慢又烧带宽。HTTP 缓存让浏览器、CDN、Nginx 在规则允许时直接复用上一次的响应——这是 Web 性能优化的第一杠杆，不花一分钱架构改造。

但规则写错就是事故：登录后的个人数据被 public 缓存，A 用户看到 B 用户的数据；HTML 配了长缓存，发了版用户永远看旧页面。面试里「强缓存和协商缓存的区别」「no-cache 和 no-store 的区别」是高频题，答案全在这一课。

先建立图像

两条缓存路线的时序图：

强缓存命中（零请求）：
  浏览器：max-age 未过期 → 直接用本地副本
  Network 面板 Size 列显示 (disk cache) / (memory cache)

协商缓存（一次往返，省 body）：
  ① 首次 GET → 200 + ETag: "v1" + body
  ② 再次 GET + If-None-Match: "v1"
  ③a 内容没变 → 304 Not Modified，无 body（省带宽，仍耗一次往返）
  ③b 内容变了 → 200 + 新 ETag + 新 body

Cache-Control 常用指令速查：

指令	人话
max-age=60	60 秒内可当新鲜，直接用本地
public	共享缓存（CDN/代理）也可以存
private	只允许浏览器存（用户私有数据）
no-store	别存任何副本（敏感数据）
no-cache	可以存，但用前必须向服务器校验（名字反直觉！）
must-revalidate	过期后必须回源验证，不许用过期副本

口诀：公开课表可短缓存；登录态/个性化数据 private 或 no-store。

跟着做

步骤 1：给 Spring Boot 接口配上缓存头

写一个演示接口，体验三种策略：

@RestController
@RequestMapping("/api/cache-demo")
public class CacheDemoController {

    // 策略 1：公开数据，短强缓存
    @GetMapping("/public-data")
    public ResponseEntity<String> publicData() {
        return ResponseEntity.ok()
            .cacheControl(CacheControl.maxAge(Duration.ofSeconds(30)).cachePublic())
            .body("public content " + LocalDate.now());
    }

    // 策略 2：私有数据，禁止一切缓存
    @GetMapping("/private-data")
    public ResponseEntity<String> privateData() {
        return ResponseEntity.ok()
            .cacheControl(CacheControl.noStore())
            .body("private content for user-A");
    }

    // 策略 3：协商缓存，用 ETag 问「变了没」
    @GetMapping("/negotiated")
    public ResponseEntity<String> negotiated(HttpServletRequest request) {
        String content = "stable content v1";
        String etag = "\"" + Integer.toHexString(content.hashCode()) + "\"";
        return ResponseEntity.ok()
            .cacheControl(CacheControl.noCache())       // 可存但必须校验
            .eTag(etag)
            .body(content);
    }
}