什么是強制緩存（強緩存）？

1. 強制緩存的原理

• 當用戶首次訪問網頁時，瀏覽器會向服務器請求資源（如 CSS、JS、圖片）。
• 服務器在返回資源時，會附帶 Cache-Control 或 Expires 頭部，告訴瀏覽器這個資源可以被緩存，以及緩存的有效期。
• 在緩存有效期內，瀏覽器會直接使用本地緩存，而不會向服務器發起請求，從而加快頁面加載速度。

2. 強制緩存的實現方式

(1) Cache-Control 頭

Cache-Control 是 HTTP/1.1 規范中用于控制緩存的主要方式，它可以通過 max-age 指定資源在緩存中的存活時間。

Cache-Control: public, max-age=31536000, immutable

• public：允許所有用戶（包括 CDN）緩存資源。
• max-age=31536000（1年）：資源在31536000 秒內（1 年）都是有效的，瀏覽器在此期間不會向服務器請求資源。
• immutable：即使用戶刷新頁面，也不會重新請求這個資源（適用于不會變化的資源，如版本化的 JS 文件 app.abc123.js）。

示例：Nginx 配置

location /static/ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
}

(2) Expires 頭（HTTP/1.0 方式，已被 Cache-Control 取代）

Expires 指定資源過期的絕對時間，瀏覽器在這個時間之前不會重新請求資源：

Expires: Wed, 21 Oct 2025 07:28:00 GMT

• 但如果用戶本地時間錯誤，Expires 可能會失效，因此現代瀏覽器更推薦 Cache-Control。

3. 強制緩存的特點

優點：

• 減少 HTTP 請求，提升性能，適用于不經常變動的靜態資源（如圖片、字體、CSS、JS）。
• 即使用戶刷新頁面，資源仍然從緩存中加載，特別是 immutable 讓資源“永久緩存”。

缺點：

• 資源更新問題：如果資源變更（如 app.js 更新），但瀏覽器仍然使用緩存，用戶可能無法獲取最新版本。
• 解決方案：使用版本號或哈希值來區分不同版本，如 app.abc123.js。

4. 強緩存 vs 協商緩存

5. 面試官可能的延伸問題

面試官：如何讓靜態資源始終走強制緩存？
回答：在服務器配置 Cache-Control: max-age=31536000, immutable，讓資源緩存 1 年且不可更改。同時，為了避免緩存過期問題，采用文件指紋（hash）版本控制，如：

<scriptsrc="/static/app.abc123.js"></script>

面試官：強制緩存 vs 協商緩存，哪個性能更好？
回答：強制緩存性能更好，因為瀏覽器不會發送請求。但它不適用于需要頻繁更新的資源，而協商緩存允許服務器判斷資源是否更新，適用于動態內容。

面試官：如何讓 index.html 始終最新，而 JS/CSS 走強制緩存？
回答：

• **index.html 設置 Cache-Control: no-cache, must-revalidate**，保證瀏覽器每次訪問都向服務器請求最新的 HTML。
• **JS/CSS 資源使用 max-age=31536000, immutable**，并使用文件版本哈希：

<scriptsrc="app.abc123.js"></script>
<linkrel="stylesheet"href="styles.456def.css">

面試官：用戶訪問了舊版本的緩存文件，如何讓他強制刷新？
回答：

• 更改文件名（帶 hash）app.abc123.js → app.def456.js。
• **后端返回 Cache-Control: no-cache 或 ETag**，讓瀏覽器重新檢查更新。
• 前端通知用戶刷新（Service Worker + 版本檢測）：

if ("serviceWorker"in navigator) {
  navigator.serviceWorker.register("/sw.js").then(reg => {
    reg.addEventListener("updatefound", () => {
      console.log("發現新版本，建議刷新頁面");
    });
  });
}

6. 總結

“強制緩存（強緩存）是一種瀏覽器緩存策略，它通過 Cache-Control: max-age=xxx 或 Expires 讓瀏覽器在緩存有效期內直接使用本地緩存，而不發送請求。這樣可以減少 HTTP 請求，提高頁面性能。相比之下，協商緩存（如 ETag 和 Last-Modified）會向服務器詢問資源是否更新。如果希望資源強制緩存但又能及時更新，可以結合文件指紋（hash）和版本控制。” 

這樣回答，既清楚解釋了強緩存原理，又能結合實際優化方案，面試官一定會認可你的專業性！