HTTP缓存机制

一、缓存机制概述

1. 强缓存（本地缓存）

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

   • 通过响应头控制：

     • Cache-Control: max-age=3600（单位：秒，优先级更高）
     • Expires: Wed, 04 Jun 2025 12:00:00 GMT（绝对时间，可能因时区误差失效）

   • 状态码表现：200 OK (from disk cache) 或 200 OK (from memory cache)。

2. 协商缓存（条件请求）

   • 当强缓存失效时，浏览器携带缓存标识向服务器验证资源是否更新。
   • 若资源未更新，服务器返回 304 Not Modified，浏览器复用本地缓存。
   • 若资源已更新，服务器返回 200 OK 和新资源。

二、304 状态码的核心作用

• 含义：服务器通知客户端：“你请求的资源未修改，请使用本地缓存”。

• 触发条件：

  1. 浏览器首次请求资源时，服务器返回的响应头包含 缓存标识（Last-Modified 或 ETag）。
  2. 后续请求时，浏览器自动携带对应的 验证头（If-Modified-Since 或 If-None-Match）。
  3. 服务器比对标识后确认资源未更新。

三、协商缓存的工作流程（以 ETag 为例）

四、协商缓存响应头与请求头

服务器响应头	浏览器下次请求头	作用
Last-Modified: <时间>	If-Modified-Since: <时间>	基于时间戳验证（精度秒级，可能不准）
ETag: "<唯一标识>"	If-None-Match: "<标识>"	基于内容哈希验证（精度高，优先使用）

---

五、实际应用场景

• 静态资源（JS/CSS/图片） ：配置强缓存（Cache-Control: max-age=31536000），通过文件名哈希确保更新。
• HTML 文件：使用协商缓存（Cache-Control: no-cache），避免因强缓存导致页面无法更新。
• API 响应：对数据实时性要求高时禁用缓存，或短时间协商缓存（如 max-age=60）。

---