一、強(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 23:59:59 GMT指定一個(gè)絕對(duì)過期時(shí)間（依賴于客戶端本地時(shí)間，可能存在誤差）。

3. Nginx 配置示例

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

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 07:28:00 GMT表示資源最后修改時(shí)間（精度為秒，可能因時(shí)間同步問題失效）。

ETag: "5d8c72a5-264"資源的唯一標(biāo)識(shí)符（哈希值或版本號(hào)），精度更高。

3. Nginx 配置示例

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

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 頁面、動(dòng)態(tài) API 響應(yīng)）。

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

四、Nginx 最佳實(shí)踐

1.混合使用兩種緩存

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

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

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

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

3.解決緩存更新問題

強(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ù)載。

到此這篇關(guān)于一文詳解Nginx的強(qiáng)緩存和協(xié)商緩存的文章就介紹到這了,更多相關(guān)Nginx緩存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論