瀏覽器緩存是瀏覽器為提升頁面加載速度、減少服務器壓力和節省網絡帶寬，在本地存儲資源（如 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 面板）調試緩存行為。