14. 请谈一下浏览器的强缓存和协商缓存

总结

1. 强缓存：响应头 cache-control: max-age=2592000
2. 协商缓存：状态码 304，响应头 Last-Modified: Thu, 01 Jan 1970 00:00:00 GMT
3. 区别：强缓存 1.0 是 expres,1.1 是 cache-control。协商缓存 last-modified

请谈一下浏览器的强缓存和协商缓存

引言

浏览器缓存机制是提高页面加载速度和减少服务器压力的重要手段。根据是否直接使用本地缓存而不向服务器发送请求，可以将缓存分为 强缓存 和 协商缓存。

强缓存（Strong Caching）

定义

强缓存是指浏览器在没有重新请求资源的情况下直接使用本地缓存。只要缓存未过期，就直接从本地读取资源，不会与服务器进行通信。

响应头字段

• Cache-Control: HTTP/1.1 标准中的缓存控制字段。
  • max-age=秒数：设置缓存的最大有效时间。
  • no-cache：不使用强缓存，但可以使用协商缓存。
  • no-store：不缓存任何内容，每次都要请求服务器。
• Expires: HTTP/1.0 标准中的缓存过期时间，表示资源失效的具体时间。

示例

Cache-Control: max-age=2592000

特点

• 不需要与服务器交互，响应速度快。
• 如果缓存期间服务器资源发生变化，用户可能看到的是旧版本。

协商缓存（Negotiated Caching）

定义

协商缓存是指浏览器在使用缓存前会向服务器发起请求以验证缓存是否仍然有效。如果服务器确认缓存有效，则返回状态码 304 Not Modified，否则返回新的资源。

请求/响应头字段

• If-Modified-Since / Last-Modified
  • 浏览器发送 If-Modified-Since 头，值为上次响应的 Last-Modified 时间。
  • 服务器比对时间，若资源未修改则返回 304。
• If-None-Match / ETag
  • 浏览器发送 If-None-Match 头，值为上次响应的 ETag。
  • 服务器比对 ETag，若一致则返回 304。

示例

Last-Modified: Thu, 01 Jan 1970 00:00:00 GMT
ETag: "abc123"

特点

• 每次使用缓存时都需要与服务器通信，确保获取最新资源。
• 相对于强缓存更可靠，但性能略低。

强缓存 vs 协商缓存对比

缓存策略建议

• 对于静态资源（如图片、CSS、JS 文件），推荐使用 Cache-Control: max-age 进行强缓存。
• 对于动态资源或频繁更新的内容，可结合 ETag 和 Last-Modified 使用协商缓存。
• 可通过组合使用 Cache-Control 和 ETag 实现灵活的缓存控制。