浏览器缓存策略详解

浏览器缓存策略详解

---

浏览器缓存策略通过HTTP头部控制，旨在提升网页加载速度、减少服务器压力，主要分为强制缓存和协商缓存两种机制。以下是详细解析：

---

一、缓存类型与流程

1. 强制缓存（强缓存）

   • 定义：直接使用本地缓存，无需与服务器通信。
   • 控制字段：
     • Cache-Control（优先级高）：
       • max-age=3600：资源有效期为3600秒。
       • no-cache：需先验证再使用缓存。
       • no-store：禁止缓存。
       • public：允许代理服务器缓存。
       • private：仅浏览器缓存。
     • Expires（旧标准）：指定绝对过期时间（如Expires: Wed, 21 Oct 2022 07:28:00 GMT），依赖客户端时间，建议与Cache-Control结合使用。

2. 协商缓存（对比缓存）

   • 定义：缓存过期后，向服务器验证资源是否变更。
   • 验证方式：
     • ETag/If-None-Match：
       • 服务器返回ETag（如"abc123"）。
       • 浏览器下次请求携带If-None-Match: "abc123"。
       • 服务器比较ETag，匹配则返回304 Not Modified，否则返回新资源。
     • Last-Modified/If-Modified-Since：
       • 服务器返回资源最后修改时间（如Last-Modified: Wed, 21 Oct 2022 07:28:00 GMT）。
       • 浏览器下次请求携带If-Modified-Since: Wed, 21 Oct 2022 07:28:00 GMT。
       • 服务器比较时间，未修改返回304，否则返回新资源。

---

二、缓存策略设计

1. 资源分类与策略

   资源类型	推荐策略	示例
   HTML文件	Cache-Control: no-cache（每次验证）	index.html
   CSS/JS/图片	Cache-Control: public, max-age=31536000	styles.a1b2c3.css（哈希命名）
   API响应	Cache-Control: private, max-age=600	/api/user（用户数据）
   敏感数据	Cache-Control: no-store	/api/token（认证令牌）

2. 缓存破坏（Cache Busting）

   • 方法：修改资源URL（通过版本号或内容哈希）。
   • 示例：
     • script.v2.js → script.v3.js
     • styles.a1b2c3.css → styles.d4e5f6.css

---

三、缓存流程示意图