一、什么是瀏覽器緩存？（入門級）
1. 瀏覽器緩存的定義
瀏覽器緩存就是：瀏覽器把之前請求過的資源保存起來，下次訪問同樣的資源時可以直接用本地副本，而不是重新請求服務器。
舉個生活例子：
- 你第一次去咖啡店買咖啡（訪問網頁）
- 店員記住了你的訂單（瀏覽器緩存資源）
- 你下次來時，店員直接把咖啡給你，不用重新制作（直接用緩存）
2. 瀏覽器緩存的作用
- 加快訪問速度（本地讀取比網絡快得多）
- 減少流量消耗（尤其移動端用戶體驗更好）
- 降低服務器壓力（減少重復請求）
面試官問：
瀏覽器緩存的作用和好處是什么？
你可以答：
它可以減少網絡請求、提高頁面加載速度，并降低服務器壓力。
二、瀏覽器緩存的分類（核心概念）
瀏覽器緩存分為兩大類：
1?? 強緩存（強制緩存）
-
特點：瀏覽器直接使用本地緩存，不請求服務器。
-
觸發條件：
-
服務器在響應頭里設置了：
Cache-Control: max-age=秒數- 或舊版本
Expires: 絕對時間
-
-
表現：
- 瀏覽器控制臺
Status顯示 200 (from disk/memory cache)
- 瀏覽器控制臺
例子：
HTTP/1.1 200 OK
Cache-Control: max-age=31536000
2?? 協商緩存（對比緩存）
-
特點：瀏覽器會先問服務器：
“我本地有緩存，你那邊更新過嗎？”
-
流程：
-
瀏覽器帶上緩存標識（
If-Modified-Since或If-None-Match） -
服務器對比：
- 如果沒更新 → 返回
304 Not Modified，瀏覽器用本地緩存 - 如果更新了 → 返回新資源，狀態碼
200
- 如果沒更新 → 返回
-
-
相關響應頭：
Last-Modified/If-Modified-SinceETag/If-None-Match
3?? 優先級總結
-
瀏覽器訪問資源的順序：
先檢查強緩存 → 命中直接用本地↓否則檢查協商緩存↓再決定請求新資源
一句話記憶：
強緩存不發請求，協商緩存要問服務器。
三、瀏覽器緩存的實際應用（進階）
在真實開發中，不同資源適合不同緩存策略：
1. 靜態資源（JS、CSS、圖片）
-
策略：強緩存 + 文件名 hash
-
原因：
- 這些文件內容很少改
- 文件名帶 hash，更新后瀏覽器會認為是新文件
示例：
app.91a2d3.js
Cache-Control: max-age=31536000
2. HTML 文件
-
策略：協商緩存或短期緩存
-
原因：
- HTML 更新頻繁，不能強緩存太久，否則用戶看不到最新版本
-
示例：
Cache-Control: no-cache ETag: "page12345"
3. 接口請求（API 數據）
-
策略：
- 經常變動的數據 → 禁用緩存或加時間戳
- 穩定數據（城市列表、字典表）→ 協商緩存或自定義緩存邏輯
示例：
fetch(`/api/user?id=1&_=${Date.now()}`) // 防止緩存
四、瀏覽器緩存相關的面試高頻題（核心）
面試官最喜歡問這些：
-
瀏覽器緩存有哪些類型？
- 強緩存（
Cache-Control/Expires） - 協商緩存（
ETag/Last-Modified）
- 強緩存（
-
強緩存和協商緩存的區別？
- 強緩存命中 → 不發請求
- 協商緩存命中 → 發請求但返回 304
-
Cache-Control 常見指令？
max-age：緩存時長（秒）no-cache：不直接用緩存，需要協商no-store：完全禁用緩存immutable：資源永遠不會變（適合版本化靜態資源）
-
ETag 和 Last-Modified 區別？
Last-Modified：按最后修改時間判斷ETag：按文件內容 hash 判斷，精度更高
-
實際開發如何設計緩存策略？
- 靜態資源：強緩存 + hash
- HTML：協商緩存
- 接口：按業務決定緩存策略
五、答題模板（背會就能面）
如果面試官問：
講一下瀏覽器緩存原理？
你可以這樣答：
① 先分類
瀏覽器緩存分為兩類：強緩存和協商緩存。
強緩存命中時直接使用本地緩存，不發請求。
協商緩存會向服務器確認資源是否更新，如果未更新返回 304。
② 說明原理
瀏覽器先查強緩存（Cache-Control / Expires），
命中直接用本地；
否則走協商緩存（ETag / Last-Modified），
服務器確認沒更新則返回 304，否則返回新資源。
③ 再講應用場景
實際開發中：
- 靜態資源（JS、CSS、圖片）用強緩存 + 文件 hash
- HTML 頁面用協商緩存
- 接口數據根據業務選擇緩存或加時間戳避免緩存
④ 強調好處
這樣能顯著提升頁面性能、減少帶寬和服務器壓力。
