2.1 私有缓存（Private Cache）#

也就是浏览器本地缓存。

特点：

• 只属于当前用户
• 可以缓存个性化内容
• 常见于静态资源、页面、接口结果

2.2 共享缓存（Shared Cache）#

也就是位于客户端和源站之间的缓存，例如：

• CDN
• 反向代理
• 网关缓存

特点：

• 多个用户共享
• 更适合缓存公共资源
• 需要特别注意个性化内容泄漏风险

MDN 对缓存类型的示意图如下：

这也是为什么缓存问题不能只谈“浏览器有没有命中”，还要考虑：

• CDN 是否命中
• 浏览器是否本地命中
• 是否需要回源校验

4.1 强缓存依赖哪些响应头？#

主要是两个：

• Cache-Control
• Expires

其中现代开发里更推荐 Cache-Control。

4.2 Expires#

这是 HTTP/1.0 的老方案，用一个明确时间表示过期时间：

1
Expires: Tue, 28 May 2026 12:00:00 GMT

问题在于它依赖客户端和服务端时间同步，系统时钟偏差会带来问题。

4.3 Cache-Control#

这是现代缓存控制的核心。

最常见写法：

1
Cache-Control: max-age=3600

表示这个响应在 3600 秒内是新鲜的，可以直接使用。

也就是说，只要资源年龄还没超过 max-age，浏览器就不会重新请求服务器。

5.1 max-age#

1
Cache-Control: max-age=604800

表示资源在 604800 秒（7 天）内都是 fresh 的。

5.2 public#

1
Cache-Control: public, max-age=604800

表示响应可以被共享缓存（如 CDN）缓存。

5.3 private#

1
Cache-Control: private

表示只能被浏览器私有缓存缓存，不能被共享缓存缓存。

常用于：

• 用户资料页
• 登录后的个性化响应
• 带 cookie 且内容因用户而异的页面

5.4 no-cache#

这是一个非常容易被误解的指令。

1
Cache-Control: no-cache

它的意思不是“不缓存”，而是：

可以缓存，但每次使用前都必须向服务器重新验证。

也就是说，它更接近“必须协商后才能用”，而不是“完全不能存”。

5.5 no-store#

1
Cache-Control: no-store

这个才是真正的：

不要存。

适合：

• 银行交易页
• 极高敏感信息页面
• 不希望落地任何缓存副本的响应

5.6 immutable#

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

它的意思是：

在 fresh 期间，这个资源肯定不会变。

特别适合带 hash 的静态资源：

• app.8a72f3.js
• main.2ef31c.css

这种资源一旦内容变化，文件名也会变化，因此可以安全地配一个很长的缓存时间。

5.7 stale-while-revalidate#

1
Cache-Control: max-age=600, stale-while-revalidate=60

表示：

• 前 600 秒内正常 fresh
• 过期后 60 秒内，可以先返回旧内容，同时后台重新验证

这是一种兼顾速度与新鲜度的策略。

8.1 Last-Modified / If-Modified-Since#

服务器第一次响应：

1
Last-Modified: Wed, 29 May 2026 10:00:00 GMT

下次请求时，浏览器会带上：

1
If-Modified-Since: Wed, 29 May 2026 10:00:00 GMT

服务器检查资源最后更新时间：

• 如果没变，返回 304
• 如果变了，返回新的 200 和新内容

8.2 ETag / If-None-Match#

服务器第一次响应：

1
ETag: "f4a1b9"

下次请求时浏览器带上：

1
If-None-Match: "f4a1b9"

服务器比较当前资源标识：

• 一样：返回 304
• 不一样：返回 200 和新资源

Last-Modified 的优点#

• 简单
• 成本低
• 很多静态资源天然适合

Last-Modified 的缺点#

• 精度通常到秒
• 秒级内多次修改可能检测不准
• 内容没变但文件时间变了，也会误判为“变了”

ETag 的优点#

• 更精确
• 更适合判断“内容是否真的变化”

ETag 的缺点#

• 服务端需要生成标识
• 某些分布式场景下处理不当会带来额外复杂度

实战建议#

常见优先级一般是：

ETag > Last-Modified

如果两者都有，通常优先使用 ETag 做判断。

11.1 浏览器缓存#

• 用户本地
• 属于私有缓存
• 主要由 HTTP 头控制

11.2 CDN 缓存#

• 位于边缘节点
• 属于共享缓存
• 常结合 Cache-Control、CDN 控制台规则使用

11.3 Service Worker 缓存#

• 由前端代码主动控制
• 可以实现离线缓存、预缓存、运行时缓存
• 适合做更灵活的缓存策略

换句话说，HTTP 缓存是浏览器和中间层默认行为，而 Service Worker 缓存是前端主动编排的缓存逻辑。

13.1 对 HTML：短缓存或不强缓存#

HTML 通常变化频繁，且它引用整个资源入口，因此一般不建议超长强缓存。

常见策略：

1
Cache-Control: no-cache

这样浏览器每次都会向服务器确认 HTML 是否更新。

13.2 对 JS / CSS / 图片：长缓存 + 文件名 hash#

例如：

• app.89d12.js
• vendor.a83f1.css

策略通常是：

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

这样做的逻辑是：

• 只要文件名不变，就说明内容不变
• 内容变了，构建产物 hash 也变，URL 自动变化

这就是最经典的 cache busting。

13.3 对接口：按业务类型区分#

例如：

• 用户资料：private, no-cache
• 新闻列表：短 max-age 或 SWR
• 配置接口：可协商缓存
• 金融交易：no-store

14.1 no-cache 不是不缓存#

它是“先存下来，但每次用前都校验”。

14.2 no-store 才是真不缓存#

这个一定要分清。

14.3 Expires 不是首选#

现代开发优先用 Cache-Control: max-age。

14.4 强缓存和协商缓存不是对立关系#

它们通常是串联关系，不是互斥关系。

14.5 只谈浏览器缓存不够#

真实线上环境里，经常还要结合：

• CDN
• Nginx
• 反向代理
• Service Worker

一起看缓存策略。

第一步：先讲目标#

浏览器缓存的目的是减少重复请求、提升访问速度、降低服务器压力。

第二步：讲两层机制#

浏览器缓存分为：

• 强缓存
• 协商缓存

强缓存命中时浏览器直接使用本地副本，不发请求；协商缓存则会发条件请求，由服务器判断资源是否变化。

第三步：讲关键头部#

强缓存：

• Cache-Control
• Expires

协商缓存：

• ETag / If-None-Match
• Last-Modified / If-Modified-Since

第四步：讲实际更新策略#

真实项目里通常会把：

• HTML 配成 no-cache
• 带 hash 的静态资源配成长缓存 max-age + immutable

第五步：补一个进阶点#

如果内容会因为语言、编码等条件变化，还要配合 Vary；线上还要结合 CDN 缓存一起设计。

这样回答，基本就已经很完整了。