HTTP 缓存机制详解：强制缓存、协商缓存与 Cache-Control 实战

一、缓存能解决什么

Web 性能优化里，缓存是性价比最高的手段之一：把「不必每次都回源请求」的资源留在浏览器或 CDN 上，既减轻服务器压力，又让用户打开更快。理解 HTTP 缓存的规则，是前端/后端/运维都绕不开的基本功。

本文讲清强制缓存、协商缓存两套机制，以及 Cache-Control 等关键响应头怎么配。

二、两类缓存：强制缓存 vs 协商缓存

• 强制缓存：浏览器在有效期内直接用本地副本，完全不发请求。由 Cache-Control（或旧的 Expires）控制。
• 协商缓存：本地副本可能过期，浏览器向服务器发一个“校验请求”，服务器告诉它“还能用（304）”或“已变（200 新内容）”。由 Last-Modified/If-Modified-Since 或 ETag/If-None-Match 控制。

一句话：强制缓存省掉请求，协商缓存省掉响应体。两者可叠加使用。

三、Cache-Control 关键指令

Cache-Control: max-age=3600, public

常用指令：

• max-age=秒：资源在多少秒内被视为新鲜。
• no-cache：可以缓存但每次使用前必须校验（走协商缓存）。
• no-store：完全不许缓存（敏感数据用）。
• public / private：能否被 CDN/代理共享缓存。
• s-maxage：专门给共享缓存（CDN）用的 max-age。
• must-revalidate：过期后必须校验，不许用过期副本。

⚠️ 常见误区：no-cache 不是“不缓存”，no-store 才是“完全不存”。

四、协商缓存：ETag 与 Last-Modified

服务器返回：

ETag: "abc123"
Last-Modified: Wed, 01 Oct 2025 00:00:00 GMT

浏览器下次带条件请求：

If-None-Match: "abc123"
If-Modified-Since: Wed, 01 Oct 2025 00:00:00 GMT

服务器判断没变就返回 304 Not Modified（无响应体，省流量）；变了返回 200 + 新内容。

• ETag 更精确（内容指纹），优先级高于 Last-Modified。
• Last-Modified 精度只到秒，内容秒内改会漏判，但对静态文件够用。

五、典型配置策略

1. 带内容哈希的静态资源（app.3f9a2.js）：内容变则文件名变，可放心长缓存：

   Cache-Control: public, max-age=31536000, immutable
   

2. HTML 入口文件：不能长缓存，否则更新不生效：

   Cache-Control: no-cache
   

   （配 ETag，每次校验，没变走 304。）
3. API 数据：按实时性定，短 max-age 或 no-cache；敏感接口 no-store。
4. CDN 分发：用 s-maxage 控制边缘缓存时间，public 允许共享。

六、一套配合的完整示例

# 静态资源（长期缓存 + 内容指纹）
Cache-Control: public, max-age=31536000, immutable
ETag: "hash-of-content"

# 首页 HTML（每次校验）
Cache-Control: no-cache
ETag: "html-hash"

# 用户隐私接口（不缓存）
Cache-Control: no-store, private

核心思路：文件名带哈希的用长强制缓存，入口/动态数据用协商缓存或 no-store。

七、刷新行为

• 普通回车/跳转：按缓存策略走。
• F5 刷新：给主文档加 no-cache 校验。
• Ctrl+F5 强制刷新：绕过缓存重新下载（调试用，不代表线上正常行为）。

八、常见坑

1. 所有资源都设长缓存又不带哈希：用户永远看到旧版本，发布后“改了没生效”。
2. 把 no-cache 当 no-store 用：该不缓存的敏感数据被缓存到磁盘。
3. 只配 max-age 没配 ETag：过期后只能整份重下，浪费带宽。
4. CDN 缓存了 HTML：动态内容串号或多用户看到同一份，需对 HTML 设 no-cache/短 max-age。
5. 忽略 Vary：按 Accept-Encoding、Accept-Language 返回不同内容的接口，要用 Vary 声明，否则共享缓存会错配。

九、总结

HTTP 缓存分**强制缓存（Cache-Control/Expires）和协商缓存（ETag/Last-Modified）**两层。落地的黄金法则是：静态资源带内容哈希 + 长 max-age；HTML 入口 no-cache + ETag；敏感/动态按需 no-store 或短缓存。配好这两层，网站的加载速度和服务器压力都会有质的改善。