frontend interviewOctober 08, 2026

HTTP Cache 如何運作？

Browser / CDN Cache 怎麼運作？

HTTP Cache 會根據 Response Headers（主要是 Cache-Control），以及 HTTP 狀態碼等條件，決定回應是否可以儲存，以及能否直接重用。

未指定 Cache-Control：不代表不能快取。符合條件的回應仍可能使用 heuristic caching（啟發式快取）來決定 freshness。
no-cache：允許儲存，但每次重用前必須重新驗證（revalidate），不能直接使用快取內容。
no-store：禁止儲存這份回應。
max-age=3600：回應在 3600 秒內可視為 fresh，通常可以直接重用。
s-maxage=3600：共享快取（例如 CDN）的 freshness lifetime 為 3600 秒，會覆寫共享快取使用的 max-age。
private：只允許私有快取儲存，禁止共享快取儲存。
public：明確允許共享快取儲存回應（仍受其他快取規則限制）。
immutable：表示資源在 fresh 期間內容不會改變，可以避免不必要的重新驗證。

Age 表示回應的估計年齡，可搭配 max-age 或 s-maxage 判斷快取是否仍然 fresh。

例如：

Cache-Control: public, max-age=0, s-maxage=3600
Age: 2400

假設伺服器提供 ETag：

ETag 是資源表示內容的驗證識別碼，不一定等於應用程式版本。

重新驗證也可以使用 Last-Modified 與 If-Modified-Since。

注意：如果中間有 CDN，Browser 可能先向 CDN 驗證；由 CDN 決定是否需要進一步聯繫 origin。

s-maxage 只作用於 Shared Cache（例如 CDN），Private Cache 會忽略它。

例如：

Cache-Control: public, max-age=0, s-maxage=3600

代表 Browser 通常每次都需要重新驗證，但 CDN 在回應仍 fresh 時，可以直接使用快取，不必重新聯繫 origin。

核心策略：固定 URL 的入口 HTML 需要重新驗證；帶有 content hash 的靜態資源可以長期快取。

Cache-Control: no-cache

適合 index.html 等 URL 固定、內容會隨部署更新的資源。

如果是使用者專屬的 HTML，可以考慮：

Cache-Control: private, no-cache

如果內容高度敏感、不應儲存，則評估使用 no-store。

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

例如：

內容改變時，檔名中的 hash 也跟著改變，產生新的 URL。

因此舊版資源可以長期快取，而新版 HTML 會引用新的資源 URL。

即使 JS/CSS 使用 content hash，如果 CDN 持續提供舊版 index.html，使用者仍可能看到舊版本。

改善方向：