前端与浏览器 / 进阶

HTTP 缓存策略：强缓存、协商缓存与版本化资源

从 Cache-Control 的语义出发，为带哈希静态资源、HTML、接口数据和用户私有数据设计可预测的缓存策略。

10 分钟HTTP Cache · Cache-Control · ETag · CDN

先按资源性质分类

文件名包含内容哈希的 JS、CSS 和图片可以缓存一年并标记 immutable，因为内容变化会产生新 URL。 HTML 入口需要较快发现新版本，常用 no-cache 允许存储，但每次使用前向源站验证。no-store 则要求不存储，适合高度敏感响应。用户资料、购物车等私有响应要使用 private，并保证 CDN 不会把带身份的数据作为公共对象缓存。

no-cache 并不等于不缓存，它表示复用前必须验证。命中协商缓存时，客户端携带 If-None-Match，服务端可返回 304。304 节省响应体，但仍有网络往返，因此不能替代真正的强缓存。

首次请求状态为 200 且响应头正确；刷新时确认来自 memory、disk 或 304；发布新版本后 HTML 能引用新哈希资源；登录用户响应不会出现在 CDN 公共缓存中。

EXAMPLE / 01HTTP Cache

/assets/app.a81f3.js
Cache-Control: public, max-age=31536000, immutable

/index.html
Cache-Control: no-cache
ETag: "html-v42"

/api/me
Cache-Control: private, no-store

把实现拆成可验证的小块

no-cache 是先验证再复用，no-store 才是不存储

最后回到真实页面检查

缓存策略必须同时检查浏览器、CDN 和源站