一、強緩存（Strong Cache）

1.定義

? 強緩存直接告訴瀏覽器：在緩存過期前，無需與服務器通信，直接使用本地緩存。
? 由服務器通過響應頭Cache-Control和Expires控制。

2.響應頭

?Cache-Control: max-age=3600
表示資源在3600 秒（1小時）內有效（優(yōu)先級高于Expires）。
?Expires: Thu, 31 Dec 2030 2359 GMT
指定一個絕對過期時間（依賴于客戶端本地時間，可能存在誤差）。

3.Nginx 配置示例

location/static/ {
 # 設置強緩存：1年內有效
 add_headerCache-Control"public, max-age=31536000";
 expires1y;
}

4.行為

? 瀏覽器首次請求資源時，服務器返回資源并附帶緩存頭。
? 后續(xù)請求時，瀏覽器直接讀取本地緩存（狀態(tài)碼200 (from disk cache)），不發(fā)送請求到服務器。

5.適用場景

? 靜態(tài)資源（如 CSS、JS、圖片、字體文件）等長期不變的資源。

二、協(xié)商緩存（協(xié)商緩存，Weak Cache）

1.定義

? 協(xié)商緩存要求瀏覽器每次向服務器驗證緩存是否過期，若未過期則返回304 Not Modified，繼續(xù)使用本地緩存。
? 由服務器通過響應頭Last-Modified和ETag控制。

2.響應頭

?Last-Modified: Wed, 21 Oct 2023 0700 GMT
表示資源最后修改時間（精度為秒，可能因時間同步問題失效）。
?ETag: "5d8c72a5-264"
資源的唯一標識符（哈希值或版本號），精度更高。

3.Nginx 配置示例

location/dynamic/ {
 # 啟用協(xié)商緩存（默認已支持，無需顯式配置）
 add_headerLast-Modified"";
 etagon;
}

4.行為

瀏覽器首次請求資源時，服務器返回資源并附帶Last-Modified或ETag。

后續(xù)請求時，瀏覽器通過以下請求頭驗證緩存：
?If-Modified-Since: [Last-Modified值]
向服務器詢問資源是否在指定時間后修改過。
?If-None-Match: [ETag值]
向服務器驗證資源的ETag是否變化。

若資源未修改，服務器返回304 Not Modified，瀏覽器繼續(xù)使用緩存；若已修改，返回新資源（狀態(tài)碼200）。

5.適用場景

? 頻繁更新的資源（如 HTML 頁面、動態(tài) API 響應）。

三、關鍵區(qū)別

四、Nginx 最佳實踐

混合使用兩種緩存

location/ {
 # 強緩存 1 小時，過期后啟用協(xié)商緩存
 add_headerCache-Control"public, max-age=3600";
 etagon;
}

按文件類型區(qū)分策略

# 圖片、字體等強緩存
location~* .(jpg|png|gif|woff2)${
 expires1y;
 add_headerCache-Control"public, max-age=31536000";
}

# HTML 文件禁用強緩存（總是協(xié)商）
location~* .html${
 add_headerCache-Control"no-cache, must-revalidate";
}

解決緩存更新問題
? 強緩存資源建議通過文件名哈希控制版本（如main.abcd1234.js）。
? 協(xié)商緩存可通過修改ETag或Last-Modified觸發(fā)更新。

五、調試工具

瀏覽器開發(fā)者工具（Network 標簽）：
? 查看200 (from disk cache)（強緩存）或304 Not Modified（協(xié)商緩存）。
? 檢查請求頭中的Cache-Control、If-Modified-Since、If-None-Match。

命令行工具：

curl -I http://example.com/resource.js

通過合理配置強緩存和協(xié)商緩存，可以顯著提升網站性能，減少服務器負載。

鏈接：https://www.cnblogs.com/ydswin/p/18757690