什么是浏览器缓存，强缓存和弱缓存的区别？

浏览器缓存是浏览器把已请求过的资源副本保存在本地；下次访问同一资源时，优先复用本地副本，从而减少网络请求、降低服务器压力并提升页面加载速度【1】。

通常说的“强缓存”和“弱缓存”，更准确地分别是 强制缓存（Freshness） 与 协商缓存（Validation）。

对比	强缓存	协商缓存（常被叫作弱缓存）
是否发请求到服务器	不发	会发
命中后的状态	常见为 200 (from memory cache/disk cache)	资源未变时返回 304 Not Modified
判断依据	本地缓存是否过期	服务端资源是否变化
关键响应头	Cache-Control、Expires	ETag / If-None-Match、Last-Modified / If-Modified-Since
性能	最好，连网络往返都省掉	比完整下载好，但仍有一次请求往返

1. 强缓存：缓存没过期，直接用本地文件#

服务器在响应里设置缓存策略，例如：

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

max-age=31536000 表示资源在一年内有效。有效期内再次请求时，浏览器直接读取本地缓存，不需要向服务器确认。

Expires 也能设置绝对过期时间：

Expires: Wed, 21 Oct 2026 07:28:00 GMT
复制

我更建议优先用 Cache-Control：Expires 依赖客户端时间，用户本机时钟不准时可能出现问题；Cache-Control 的优先级也更高。

浏览器会依据 Cache-Control 和 Expires 判断本地资源是否仍有效【2】。例如：

Cache-Control: max-age=2000
复制

意味着 2000 秒内可直接复用缓存【3】。

2. 协商缓存：缓存过期了，问服务器文件有没有变#

本地缓存过期后，不代表一定要重新下载。浏览器会带上资源标识向服务器验证：

If-None-Match: "4f80f-13c-3a1xb12a"
复制

服务端拿这个值与当前资源的 ETag 比较：

• 资源没变：返回 304 Not Modified，没有响应体；浏览器继续使用本地缓存。
• 资源变了：返回 200 OK 和新资源，浏览器更新本地缓存。

这个流程在缓存过期后触发，If-None-Match 用于让服务端判断资源是否更新【3】。

3. 实际配置建议#

• 带内容哈希的静态资源，例如 app.8f3a1c.js：使用长时间强缓存。

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

• HTML：内容入口通常需要尽快更新，使用协商缓存更稳妥。

Cache-Control: no-cache
复制

• 接口响应：是否缓存取决于数据实时性和用户隔离要求；涉及个人信息或敏感数据时，不应使用共享缓存。

核心原则是：文件名可随内容变化的静态资源，用长强缓存；URL 不变但内容可能变化的资源，用协商缓存。

参考#

【1】《HTTP 请求流程》：浏览器会在网络请求前查询本地资源副本，命中时可直接返回缓存，以降低耗时和服务器压力。

【2】《浏览器缓存的全过程》：浏览器通过 Expires 和 Cache-Control 检查本地强缓存是否有效。

【3】《HTTP 请求流程》：Cache-Control: max-age 控制缓存有效期；过期后浏览器可携带 If-None-Match，服务端未更新时返回 304。