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

1. 強制緩存的原理

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

2. 強制緩存的實現(xiàn)方式

(1) Cache-Control 頭

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

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

• public：允許所有用戶（包括 CDN）緩存資源。
• max-age=31536000（1年）：資源在31536000 秒內(nèi)（1 年）都是有效的，瀏覽器在此期間不會向服務(wù)器請求資源。
• 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 可能會失效，因此現(xiàn)代瀏覽器更推薦 Cache-Control。

3. 強制緩存的特點

優(yōu)點：

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

缺點：

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

4. 強緩存 vs 協(xié)商緩存

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

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

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

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

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

• **index.html 設(shè)置 Cache-Control: no-cache, must-revalidate**，保證瀏覽器每次訪問都向服務(wù)器請求最新的 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("發(fā)現(xiàn)新版本，建議刷新頁面");
    });
  });
}

6. 總結(jié)

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

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