一句話概括：瀏覽器請求資源的時候，會首先檢查本地是否有緩存，減少向服務器請求的次數

一、緩存類型：

1. 強緩存（本地緩存）：直接讀本地，不發請求

• 控制方式：
  • ① Cache-Control(HTTP1.1):優先級高
    max-age=秒數
    public：可被緩存，包括代理服務器
    private：客戶端緩存
    no-cache：強制走協商緩存驗證(不要直接用本地緩存，必須去驗證，驗證完了再說用不用)
    no-store：禁止緩存，每次都需要請求服務器
    通常情況時服務端配置，少數情況前端可通過meta標簽配置，但優先級低于服務端響應頭，（<meta http-equiv="Cache-Control" content="max-age=3600">）
  • ② Expires(HTTP1.0)：指定資源過期時間

2. 協商緩存（服務器驗證）：瀏覽器發請求驗證是否可用，返回304則可用

• 控制方式
  • ① Last-Modified + If-Modified-Since
    服務器返回資源時帶LM（最后修改時間）
    瀏覽器下次請求時帶IMS（上次修改時間），服務器對比是否更新
    ** Last-Modified服務器主動添加，表示資源的最后修改時間；If-Modified-Since瀏覽器自動發送，無需手動添加 **
  • ② ETag + If-None-Match 更精準
    服務器返回資源時帶ETag（資源內容hash）
    瀏覽器下次請求時帶If-None-Match，服務器對比hash

總結：瀏覽器緩存分為強緩存和協商緩存。強緩存即直接讀取本地緩存，它的控制方式是cache-control，可以設置過期時間，也可以設置no-cache強制走協商緩存。協商緩存即是瀏覽器先發一個請求驗證緩存是否可用，若返回304則可用，驗證的方式有兩種，一種是對比修改時間，一種是對比內容hash

二、如何設計緩存策略（數據類型，更新頻率，用戶體驗）

1. 瀏覽器原生緩存

場景：存儲資源
強緩存：靜態資源（圖片、CSS、js、字體）設置長一些的過期時間
協商緩存：結合ETag對比更新；版本控制 --> URL版本號（?v=1.0.0）

2. 本地存儲

場景：存儲用戶配置、登錄信息、需跨頁面共享的臨時數據

• localStorage：數據永久保存（除非手動清除或瀏覽器清除），容量較大，同源共享
  • 適用于：緩存用戶配置、主題偏好等
• sessionStorage：會話級，瀏覽器關閉后自動刪除，容量較大，不同標簽頁不共享
  • 適用于：緩存分頁狀態等
• cookie：自動發送到服務端（fetch默認不帶），容量小，可設置過期時間，可配置作用域
  • 適用于：登錄憑證JWT，服務端會話狀態SessionID

3. 內存緩存

場景：存儲頻繁訪問、更新頻率低的數據（下拉列表選項等）
通過維護全局變量，一次請求，后續直接讀取，可配合定時器或事件監聽定時更新

4. 接口請求緩存（Axios等庫自定義緩存）

場景：列表數據、詳情頁數據
axios-interceptors攔截請求，判斷是否讀取緩存
根據用戶操作調整策略：下拉刷新 --> 強制更新，手動刷新按鈕

三、調試：

Chrome瀏覽器的開發工具：Chrome DevTools -> Network -> Size顯示from cache表示使用緩存
勾選 Disable cache 可強制禁用緩存（開發時常用）·