浏览器缓存机制全解析：强缓存与协商缓存

浏览器缓存是浏览器为提升页面加载速度、减少服务器压力和节省网络带宽，在本地存储资源（如 HTML、CSS、JS、图片等）的机制。其核心分为强缓存 和协商缓存，并涉及多种 HTTP 头字段和存储位置。以下是详细解析：

---

⚙️ 一、缓存分类与核心机制

1. 强缓存（本地缓存）

• 原理 ：浏览器直接检查本地缓存的有效性，未过期则直接使用缓存，不发送请求到服务器。
• 关键字段 ：
  • Cache-Control（HTTP/1.1）：
    • max-age=3600：缓存有效期（秒）。
    • public：资源可被浏览器和代理服务器（如 CDN）缓存。
    • private：仅浏览器可缓存，禁止代理服务器缓存。
    • no-cache：禁用强缓存，必须走协商缓存。
    • no-store：完全禁止缓存（包括强缓存和协商缓存）。
  • Expires（HTTP/1.0）：绝对过期时间（如 Expires: Wed, 21 Oct 2025 07:28:00 GMT），因依赖客户端时间可能失效，优先级低于 Cache-Control。
• 生效表现 ：HTTP 状态码 200 (from disk/memory cache)。

2. 协商缓存（304 缓存）

• 原理 ：强缓存失效后，浏览器携带缓存标识向服务器验证资源是否更新。未更新则返回 304，使用缓存；更新则返回新资源。
• 关键字段 ：
  • Last-Modified（响应头） + If-Modified-Since（请求头）：
    • 服务器返回资源最后修改时间（如 Last-Modified: Mon, 10 Nov 2018 09:10:11 GMT）。
    • 浏览器下次请求时携带该时间（If-Modified-Since），服务器对比时间判断是否更新。
    • 缺点：精度仅到秒级，1 秒内多次修改可能误判。
  • ETag（响应头） + If-None-Match（请求头）：
    • 服务器返回资源唯一标识（如哈希值，ETag: "d41d8cd98f00b204"）。
    • 浏览器下次请求携带该标识（If-None-Match），服务器对比标识判断更新。
    • 优先级高于 Last-Modified，但生成 ETag 增加服务器开销。
• 生效表现 ：HTTP 状态码 304 (Not Modified)。

---

📍 二、缓存存储位置

浏览器缓存按存储位置分为四类，优先级依次下降：

1. Service Worker 缓存 ：
   • 开发者通过 JavaScript 控制，支持离线访问（PWA 核心），需 HTTPS 协议。
2. Memory Cache（内存缓存） ：
   • 存储当前页面资源（如 CSS、JS），读取极快，关闭标签页即释放。
3. Disk Cache（磁盘缓存） ：
   • 持久化存储大型资源（如图片、视频），根据 HTTP 头策略管理缓存，容量大但读取较慢。
4. Push Cache（推送缓存） ：
   • HTTP/2 服务器推送的资源暂存区，会话级有效（约 5 分钟），使用优先级最低。

---

🔄 三、缓存完整流程

浏览器缓存过程如下（以首次请求为例）：

1. 首次请求资源：

   • 浏览器无缓存，向服务器发送请求。
   • 服务器返回资源及缓存头（如 Cache-Control: max-age=3600, ETag: "xyz"）。
   • 浏览器存储资源及标识到 Disk Cache 或 Memory Cache。

2. 再次请求相同资源：

   • Step 1 ：检查强缓存（Cache-Control/Expires）：
     • 若未过期 → 直接使用缓存（状态码 200 (from cache)）。
     • 若过期 → 进入协商缓存流程。
   • Step 2 ：协商缓存验证：
     • 浏览器携带 If-None-Match（ETag 值）或 If-Modified-Since（时间戳）向服务器发起请求。
     • 服务器对比标识：
       • 未更新 → 返回 304，浏览器使用缓存。
       • 已更新 → 返回 200 和新资源，更新本地缓存。

---

⚡️ 四、缓存策略最佳实践

1. 静态资源（JS/CSS/图片） ：
   • 强缓存 + 文件名哈希（如 app.a1b2c3.css），更新后文件名变化自动失效缓存。
   • 示例：Cache-Control: public, max-age=31536000, immutable（一年内有效）。
2. HTML 文件 ：
   • 禁用强缓存（Cache-Control: no-cache），使用协商缓存（ETag），避免加载旧 HTML 导致资源更新失效。
3. 动态 API 或敏感数据 ：
   • 完全禁用缓存：Cache-Control: no-store。

---

⚠️ 五、注意事项

1. 刷新操作影响缓存 ：
   • 普通刷新（F5）：跳过强缓存，检查协商缓存。
   • 强制刷新（Ctrl+F5）：忽略所有缓存，重新请求服务器。
2. 缓存失效问题 ：
   • 强缓存时间过长可能导致用户无法获取更新，可通过 URL 追加参数（如 ?t=20250805）或文件名哈希解决。

---

💎 总结：浏览器缓存核心要点

类型	原理	关键字段/标识	特点
强缓存	直接使用本地缓存，不请求服务器	Cache-Control > Expires	状态码 200 (from cache)
协商缓存	向服务器验证缓存是否有效	ETag > Last-Modified	状态码 304 (Not Modified)
Memory Cache	内存临时存储	无特定字段，浏览器自动管理	读取快，标签关闭即释放
Disk Cache	硬盘持久化存储	遵循 HTTP 缓存头策略	容量大，支持跨会话复用

通过合理配置缓存策略，可显著提升网站性能。实际开发中，建议结合资源类型（静态/动态）和更新频率选择策略，并利用开发者工具（如 Chrome DevTools 的 Network 面板）调试缓存行为。