本文目錄導(dǎo)讀：

1. 引言
2. 1. 瀏覽器緩存的基本概念
3. 2. Cache-Control：控制強緩存
4. 3. ETag：實現(xiàn)協(xié)商緩存
5. 4. Cache-Control與ETag的協(xié)同優(yōu)化
6. 5. 實際案例分析
7. 6. 總結(jié)

在現(xiàn)代Web開發(fā)中，優(yōu)化網(wǎng)頁加載速度是提升用戶體驗的關(guān)鍵因素之一，瀏覽器緩存策略的合理配置可以顯著減少網(wǎng)絡(luò)請求，降低服務(wù)器負載，并加快頁面渲染速度。Cache-Control和ETag是HTTP緩存機制中最重要的兩個配置項，本文將深入探討它們的原理、配置方式及最佳實踐,幫助開發(fā)者優(yōu)化緩存策略。

---

瀏覽器緩存的基本概念

瀏覽器緩存是指瀏覽器將請求過的資源（如HTML、CSS、JavaScript、圖片等）存儲在本地，以便后續(xù)訪問時可以直接從本地加載，而無需再次向服務(wù)器請求,合理的緩存策略可以：

• 減少網(wǎng)絡(luò)請求：降低帶寬消耗,提高頁面加載速度。
• 減輕服務(wù)器壓力：減少重復(fù)請求,提高服務(wù)器響應(yīng)能力。
• 提升用戶體驗：加快頁面渲染,減少等待時間。

HTTP緩存主要分為強緩存和協(xié)商緩存兩種機制：

1. 強緩存：瀏覽器直接從本地緩存讀取資源，不向服務(wù)器發(fā)送請求，由Cache-Control和Expires控制。
2. 協(xié)商緩存：瀏覽器向服務(wù)器發(fā)送請求，由服務(wù)器判斷資源是否更新，決定是否返回新內(nèi)容，由ETag和Last-Modified控制。

---

Cache-Control：控制強緩存

Cache-Control是HTTP/1.1引入的緩存控制頭部，比Expires更靈活，支持多種指令,可以精確控制緩存行為。

1 常用指令

指令	說明
max-age=<seconds>	資源緩存的最大時間（秒）
no-cache	不使用強緩存，每次請求都向服務(wù)器驗證
no-store	禁止緩存，每次請求都重新獲取資源
public	響應(yīng)可被任何緩存（如CDN、代理服務(wù)器）存儲
private	響應(yīng)僅限用戶瀏覽器緩存，中間代理不可緩存
must-revalidate	緩存過期后必須向服務(wù)器驗證

2 配置示例

Cache-Control: public, max-age=3600  # 緩存1小時，允許CDN緩存
Cache-Control: private, max-age=600 # 緩存10分鐘，僅限瀏覽器緩存
Cache-Control: no-cache             # 禁用強緩存，每次請求都驗證
Cache-Control: no-store             # 完全不緩存，適用于敏感數(shù)據(jù)

3 最佳實踐

• 靜態(tài)資源（CSS/JS/圖片）：使用max-age設(shè)置較長的緩存時間（如1年），并結(jié)合文件名哈希（main.[hash].js）確保更新后能獲取新版本。
• （HTML/API）：使用no-cache或較短的max-age,確保用戶獲取最新數(shù)據(jù)。
• 敏感數(shù)據(jù)（用戶信息）：使用private或no-store,避免泄露。

---

ETag：實現(xiàn)協(xié)商緩存

ETag（Entity Tag）是服務(wù)器返回的資源唯一標(biāo)識符，用于協(xié)商緩存，當(dāng)瀏覽器再次請求資源時，會攜帶If-None-Match頭部（包含ETag值），服務(wù)器比對ETag決定返回304 Not Modified（使用緩存）或200 OK（返回新資源）。

1 ETag的生成方式

• 強ETag：基于文件內(nèi)容生成（如MD5哈希），內(nèi)容變化時ETag必變。
• 弱ETag：以W/開頭，僅表示語義變化（如文件修改時間）,適用于大文件優(yōu)化。

2 配置示例

ETag: "33a64df551425fcc55e4d42a148795d9"  # 強ETag
ETag: W/"0815"                            # 弱ETag

3 工作流程

1. 瀏覽器首次請求資源，服務(wù)器返回ETag。
2. 瀏覽器再次請求時，攜帶If-None-Match: "33a64df551425fcc55e4d42a148795d9"。
3. 服務(wù)器比對ETag：
   • 匹配 → 返回304 Not Modified,瀏覽器使用緩存。
   • 不匹配 → 返回200 OK和新資源。

4 最佳實踐

• 靜態(tài)資源：結(jié)合Cache-Control: max-age和ETag，既利用強緩存減少請求,又確保更新后能獲取新版本。
• 動態(tài)API：使用ETag避免重復(fù)傳輸未變化的數(shù)據(jù)。
• CDN兼容性：確保CDN支持ETag,否則可能失效。

---

Cache-Control與ETag的協(xié)同優(yōu)化

1 典型緩存策略

1. 長期緩存靜態(tài)資源：

   Cache-Control: public, max-age=31536000  # 緩存1年
   ETag: "33a64df551425fcc55e4d42a148795d9"

   • 結(jié)合文件哈希（如app.[hash].js），確保內(nèi)容變化后URL改變,強制瀏覽器獲取新資源。

2. 協(xié)商緩存：

   Cache-Control: no-cache
   ETag: W/"0815"

   • 每次請求都驗證ETag,減少不必要的數(shù)據(jù)傳輸。

2 避免緩存問題

• 緩存污染：錯誤的max-age可能導(dǎo)致用戶長時間看到舊內(nèi)容，可通過版本控制（如?v=1.0）解決。
• CDN緩存不一致：確保CDN遵循Cache-Control和ETag,必要時手動刷新CDN緩存。

---

實際案例分析

1 靜態(tài)資源優(yōu)化

# 服務(wù)器響應(yīng)
HTTP/1.1 200 OK
Cache-Control: public, max-age=31536000
ETag: "33a64df551425fcc55e4d42a148795d9"

• 瀏覽器緩存1年,后續(xù)請求優(yōu)先使用緩存。
• 文件更新后，URL變化（如app.abc123.js）,強制加載新資源。

2 API數(shù)據(jù)緩存

# 服務(wù)器響應(yīng)
HTTP/1.1 200 OK
Cache-Control: no-cache
ETag: W/"12345"

• 每次API請求都驗證ETag，未變化時返回304,減少數(shù)據(jù)傳輸。

---

合理配置Cache-Control和ETag可以顯著提升Web應(yīng)用性能：

• Cache-Control：控制強緩存,適用于靜態(tài)資源長期緩存。
• ETag：實現(xiàn)協(xié)商緩存,適用于動態(tài)內(nèi)容驗證。
• 結(jié)合使用：靜態(tài)資源用max-age+ETag用no-cache+ETag。

通過優(yōu)化緩存策略，開發(fā)者可以減少服務(wù)器負載、加快頁面加載速度,并提供更流暢的用戶體驗。