强制缓存与协商缓存

强制缓存与协商缓存的区别

强制缓存和协商缓存是HTTP缓存机制的两种主要策略，它们在浏览器缓存控制方面有着不同的工作原理和应用场景。

强制缓存 (Strong Cache)

特点：

• 浏览器不向服务器发送请求，直接使用本地缓存

• 完全由客户端控制缓存行为

实现方式：

• 通过以下HTTP响应头控制：

  • Cache-Control: max-age=3600 (缓存有效期，单位秒)

  • Expires: Wed, 21 Oct 2025 07:28:00 GMT (绝对过期时间)

工作流程：

1. 浏览器检查缓存是否存在且未过期

2. 如果有效，直接使用缓存，不发送请求到服务器

3. 如果过期，则进入协商缓存流程

适用场景：

• 静态资源（如图片、CSS、JS等不常变更的文件）

• 可以长时间缓存的内容

协商缓存 (Conditional Cache)

特点：

• 浏览器会向服务器发送请求验证缓存是否有效

• 需要客户端和服务器\"协商\"决定是否使用缓存

实现方式：

• 使用以下HTTP头部组合：

  • Last-Modified (服务器最后修改时间) + If-Modified-Since (客户端发送验证)

  • ETag (资源唯一标识) + If-None-Match (客户端发送验证)

工作流程：

1. 浏览器发送请求，携带If-Modified-Since或If-None-Match

2. 服务器验证资源是否修改：

   • 未修改：返回304 Not Modified，浏览器使用缓存

   • 已修改：返回200和新资源

适用场景：

• 频繁可能变更的资源

• 需要实时性较高的内容

主要区别对比

特性 强制缓存 协商缓存 网络请求 不发送请求 发送验证请求 响应状态码 200 (from cache) 304 Not Modified 控制头 Cache-Control, Expires Last-Modified/ETag 带宽消耗 低 中(需要发送请求头) 实时性 低(直到过期) 高(每次验证) 典型应用 静态资源 动态内容

实际应用建议

1. 对静态资源使用强制缓存并设置较长max-age

2. 对HTML文档使用协商缓存

3. 可通过文件名哈希实现\"永久缓存\"策略：

   • style.a1b2c3d4.css这样的文件名变化可视为新资源

   • 设置Cache-Control: max-age=31536000(1年)

4. 组合使用示例：

Cache-Control: public, max-age=604800ETag: \"33a64df551425fcc55e4d42a148795d9f25f89d4\"