浏览器缓存策略

浏览器缓存策略是Web性能优化的核心机制之一，通过合理利用缓存可以减少网络请求、降低服务器负载并加速页面加载。以下是浏览器缓存的详细策略和工作原理：

---

1. 强缓存（无需服务器验证）

浏览器直接使用本地缓存资源，不发送请求到服务器。通过以下HTTP头部控制：

1.1 Expires

• 原理：指定资源的绝对过期时间（HTTP/1.0）。
• 示例：

  Expires: Wed, 21 Oct 2025 07:28:00 GMT
  

• 缺点：依赖客户端时间，若时间不准确会导致缓存失效。

1.2 Cache-Control（HTTP/1.1优先级更高）

• 常用指令：
  • max-age=3600：资源有效期（秒），例如1小时。
  • no-cache：禁用强缓存，需协商缓存验证。
  • no-store：完全禁止缓存（敏感数据）。
  • public：允许代理/CDN缓存。
  • private：仅允许浏览器缓存。
• 示例：

  Cache-Control: max-age=3600, public
  

---

2. 协商缓存（需服务器验证）

当强缓存失效时，浏览器向服务器验证资源是否变更。若未变更（304响应），则继续使用缓存。

2.1 Last-Modified / If-Modified-Since

• 原理：通过文件修改时间判断。

  • 首次请求时，服务器返回：

    Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT
    

  • 再次请求时，浏览器发送：

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

  • 若时间未变，服务器返回 304 Not Modified。

• 缺点：

  • 精度仅到秒，快速更新可能无法检测。
  • 文件内容不变但修改时间变化（如重命名）会导致无效请求。

2.2 ETag / If-None-Match

• 原理：通过文件内容生成的唯一标识（如哈希值）判断。

  • 首次请求时，服务器返回：

    ETag: "33a64df551425fcc55e4d42a148795d9"
    

  • 再次请求时，浏览器发送：

    If-None-Match: "33a64df551425fcc55e4d42a148795d9"
    

  • 若ETag匹配，服务器返回 304。

• 优势：更精准，能识别内容变化。

• 缺点：计算ETag消耗服务器资源。

---

3. 缓存决策流程

1. 检查强缓存：
   • 若 Cache-Control 或 Expires 未过期，直接使用缓存（状态码200 from cache）。
2. 协商缓存验证：
   • 强缓存失效后，携带 If-Modified-Since 或 If-None-Match 向服务器验证。
   • 若资源未变，返回304；否则返回200和新资源。

---

4. 实际应用建议

• 静态资源（JS/CSS/图片）：
  • 设置长期强缓存：Cache-Control: max-age=31536000（1年）。
  • 通过文件名哈希（如 app.a1b2c3.js）实现内容更新后URL变化，强制重新下载。
• HTML文件：
  • 使用 no-cache 或短 max-age，确保及时获取最新版本。
• API请求：
  • 对频繁变动的数据用 no-store 或 max-age=0 + ETag。

---

5. 用户行为对缓存的影响

• 正常访问：遵循服务器缓存策略。
• 强制刷新（Ctrl+F5）：跳过强缓存和协商缓存，直接请求服务器（HTTP头部带 Cache-Control: no-cache）。
• 后退/前进：可能使用磁盘缓存，不受 no-store 影响。

---

6. 通过代码设置缓存

后端示例（Node.js）：

res.setHeader('Cache-Control', 'public, max-age=3600');
res.setHeader('ETag', fileHash); // 基于内容生成ETag

前端（HTML Meta标签，不推荐）：

<meta http-equiv="Cache-Control" content="max-age=3600">

（仅部分浏览器支持，优先级低于HTTP头部）

---

通过合理组合强缓存与协商缓存，可以显著提升用户体验并减少服务器压力。建议使用现代工具（如Webpack）自动化文件名哈希，并监控缓存命中率以优化策略。