面試官： 說一下什么是強制緩存
什么是強制緩存（強緩存）？
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 協商緩存
對比項 | 強制緩存（強緩存） | 協商緩存（對比緩存） |
是否請求服務器 | 不會 ，直接使用本地緩存 | 會發送請求 ，但可能返回 304 Not Modified |
緩存控制方式 | Cache-Control: max-age=xxx 、Expires | ETag 、Last-Modified |
適用場景 | 靜態資源（JS、CSS、圖片） | 可能會更新的資源 |
資源更新方式 | 依賴 max-age，需要手動更改 URL | 服務器檢測是否有更新 |
是否適合頻繁變化資源 | 不適合 （需要版本控制） | 適合 （服務器決定是否返回新資源） |
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）和版本控制。”
這樣回答，既清楚解釋了強緩存原理，又能結合實際優化方案，面試官一定會認可你的專業性！
