一、強(qiáng)緩存（Strong Cache）

1.定義

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

2.響應(yīng)頭

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

3.Nginx 配置示例

location/static/ {
 # 設(shè)置強(qiáng)緩存：1年內(nèi)有效
 add_headerCache-Control"public, max-age=31536000";
 expires1y;
}

4.行為

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

5.適用場(chǎng)景

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

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

1.定義

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

2.響應(yīng)頭

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

3.Nginx 配置示例

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

4.行為

瀏覽器首次請(qǐng)求資源時(shí)，服務(wù)器返回資源并附帶Last-Modified或ETag。

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

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

5.適用場(chǎng)景

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

三、關(guān)鍵區(qū)別

四、Nginx 最佳實(shí)踐

混合使用兩種緩存

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

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

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

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

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

五、調(diào)試工具

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

命令行工具：

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

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

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