一、強緩存（Strong Cache）

1. 定義

強緩存直接告訴瀏覽器：在緩存過期前，無需與服務(wù)器通信，直接使用本地緩存。

由服務(wù)器通過響應頭 Cache-Control 和 Expires 控制。

2. 響應頭

 Cache-Control: max-age=3600表示資源在 3600 秒（1小時） 內(nèi)有效（優(yōu)先級高于 Expires）。

Expires: Thu, 31 Dec 2030 23:59:59 GMT指定一個絕對過期時間（依賴于客戶端本地時間，可能存在誤差）。

3. Nginx 配置示例

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

4. 行為

瀏覽器首次請求資源時，服務(wù)器返回資源并附帶緩存頭。

后續(xù)請求時，瀏覽器直接讀取本地緩存（狀態(tài)碼 200 (from disk cache)），不發(fā)送請求到服務(wù)器。

5. 適用場景

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

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

1. 定義

協(xié)商緩存要求瀏覽器 每次向服務(wù)器驗證緩存是否過期，若未過期則返回 304 Not Modified，繼續(xù)使用本地緩存。

由服務(wù)器通過響應頭 Last-Modified 和 ETag 控制。

2. 響應頭

 Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT表示資源最后修改時間（精度為秒，可能因時間同步問題失效）。

ETag: "5d8c72a5-264"資源的唯一標識符（哈希值或版本號），精度更高。

3. Nginx 配置示例

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

4. 行為

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

后續(xù)請求時，瀏覽器通過以下請求頭驗證緩存：

• If-Modified-Since: [Last-Modified值]向服務(wù)器詢問資源是否在指定時間后修改過。
• If-None-Match: [ETag值]向服務(wù)器驗證資源的 ETag 是否變化。

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

5. 適用場景

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

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

四、Nginx 最佳實踐

1.混合使用兩種緩存

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

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

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

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

3.解決緩存更新問題

強緩存資源建議通過 文件名哈希 控制版本（如 main.abcd1234.js）。

協(xié)商緩存可通過修改 ETag 或 Last-Modified 觸發(fā)更新。

五、調(diào)試工具

瀏覽器開發(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é)商緩存，可以顯著提升網(wǎng)站性能，減少服務(wù)器負載。

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

最新評論