强缓存和协商缓存

问题

浏览器的强缓存和协商缓存分别是什么，它们如何工作？

解答

浏览器缓存是指客户端在本地磁盘中对访问过的资源保存的副本文件。缓存可以减少重复请求、降低服务器压力、加快页面加载速度。

浏览器缓存分为强缓存和协商缓存，两者的主要区别：

强缓存：命中后不需要向服务器发请求，直接使用本地缓存。Chrome 中状态码显示为 200 (from cache)。

协商缓存：需要向服务器发请求确认资源是否可用，由服务器决定是否使用缓存。命中后状态码为 304 (not modified)。

缓存流程

浏览器第一次请求后缓存资源，再次请求时：

1. 检查强缓存：根据响应头的 Expires 或 Cache-Control 判断是否命中。命中则直接使用缓存。

2. 检查协商缓存：如果强缓存未命中，发送请求到服务器，请求头带上 If-Modified-Since 或 If-None-Match。服务器对比这些字段判断资源是否更新。如果未更新返回 304，浏览器使用缓存；否则返回新资源和更新后的缓存字段。

强缓存字段

Expires（HTTP 1.0）

Expires: Mon, 18 Oct 2066 23:59:59 GMT

表示资源失效的绝对时间点。缺点是如果服务器时间与客户端时间偏差较大，会导致缓存判断错误。

Cache-Control（HTTP 1.1）

Cache-Control: max-age=3600

表示资源的有效期是相对时间（秒）。配合响应头的 Date 字段，资源在 Date ~ Date + max-age 时间内有效。

Cache-Control 的其他值：

• no-cache：不使用本地缓存，需要使用协商缓存
• no-store：禁止缓存，每次都向服务器请求完整资源
• public：可以被所有用户缓存，包括 CDN 等中间代理服务器
• private：只能被终端用户浏览器缓存

当 Cache-Control 与 Expires 同时存在时，Cache-Control 优先级更高。

协商缓存字段

Last-Modified / If-Modified-Since

Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT
If-Modified-Since: Wed, 21 Oct 2023 07:28:00 GMT

Last-Modified 标记文件最后修改时间。下次请求时，If-Modified-Since 带上这个时间，服务器对比文件修改时间判断资源是否变化。如果未变化返回 304，浏览器使用本地缓存；如果有变化返回新资源和新的 Last-Modified。

ETag / If-None-Match

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"

ETag 是服务器为每个资源生成的唯一标识串（通常是哈希值），资源变化时这个值就会改变。服务器通过对比 If-None-Match 和当前 ETag 判断资源是否更新。即使返回 304，响应头也会包含重新计算的 ETag。

关键点

• 强缓存不发请求直接使用本地缓存，协商缓存需要服务器确认是否使用缓存
• Cache-Control 优先级高于 Expires，使用相对时间更可靠
• 协商缓存通过 Last-Modified 或 ETag 判断资源是否更新
• ETag 比 Last-Modified 更精确，可以识别内容变化而非仅时间变化