文章目錄
- 一、什么是緩存命中？
- 二、前端開發要知道哪些緩存機制（以及命中條件）？
- 1. 瀏覽器緩存（主要針對靜態資源）
- 常見的緩存位置
- 關鍵 HTTP 頭字段（決定命中與否）
- 2. 前端應用層緩存（例如數據請求）
- 三、前端開發者需要掌握哪些實踐？
- 瀏覽器緩存策略實戰建議
- 數據緩存建議
- 四、如何判斷資源是否命中緩存？
- 五、緩存未命中
- 總結
作為前端開發者，理解 緩存命中（Cache Hit） 非常重要，尤其在你處理性能優化、資源加載、用戶體驗提升、離線支持等方面。
一、什么是緩存命中？
緩存命中（Cache Hit） 指當你請求某個資源（比如圖片、JS 文件、API 響應等）時，瀏覽器或其他中間層發現緩存中已有該資源，于是直接返回緩存結果，而不需要再去網絡請求。
這樣做有兩個好處：
- 提升加載速度：從緩存讀取遠比從網絡拉取快得多。
- 減少服務器壓力：命中緩存后不發起請求，減輕后端負擔。
二、前端開發要知道哪些緩存機制（以及命中條件）？
前端緩存機制主要分為兩大類：瀏覽器緩存（靜態資源） 和 應用層緩存（數據、狀態）。
1. 瀏覽器緩存（主要針對靜態資源）
常見的緩存位置
- 內存緩存（Memory Cache）：短期緩存，刷新頁面即失效。
- 磁盤緩存（Disk Cache）：持久性更強，關閉瀏覽器后依然有效。
- Service Worker 緩存：你控制的離線緩存，可以精細化管理。
- Push Cache（HTTP/2）：很短暫，針對同一次會話的緩存。
關鍵 HTTP 頭字段（決定命中與否）
| 字段 | 作用 | 示例 |
|---|---|---|
Cache-Control | 控制是否緩存、緩存時長 | max-age=3600, no-cache |
ETag | 內容標識符，用于比較是否更新 | ETag: "abc123" |
Last-Modified | 上次修改時間 | Last-Modified: Wed, 01 May 2024 12:00:00 GMT |
Expires | 絕對過期時間（已被 Cache-Control 替代） | Expires: Tue, 21 May 2025 08:00:00 GMT |
命中機制簡化流程：
-
瀏覽器請求資源。
-
如果緩存未過期（如
max-age生效） → 強緩存命中（直接使用緩存）。 -
如果緩存過期 → 瀏覽器發送帶上
If-None-Match（對比ETag）或If-Modified-Since（對比修改時間）。- 若內容沒變，服務器返回
304 Not Modified→ 協商緩存命中。 - 否則重新返回新資源。
- 若內容沒變，服務器返回
2. 前端應用層緩存（例如數據請求）
用于緩存 API 請求或狀態數據，例如：
localStorage/sessionStorage：持久化存儲。IndexedDB：復雜結構、本地數據庫。- 前端框架內緩存：如 React Query、SWR、Apollo Client 等。
例如在 SWR 中，數據緩存命中機制基于 key-value 和 revalidation 策略：
const { data } = useSWR('/api/user', fetcher)
- 再次訪問相同 key（URL）→ 命中緩存。
- 根據配置決定是否 revalidate（重新請求）。
三、前端開發者需要掌握哪些實踐？
瀏覽器緩存策略實戰建議
-
設置合理的 Cache-Control
- JS/CSS 設置長時間緩存：
Cache-Control: public, max-age=31536000, immutable - HTML 頁面設置短時間緩存 + 協商緩存：
no-cache
- JS/CSS 設置長時間緩存：
-
使用文件哈希名作為緩存破壞手段（Cache Busting）
- 比如：
main.3f3c1f.js，文件變了名字也變了，瀏覽器會重新加載。
- 比如：
-
服務端正確返回 ETag/Last-Modified
- 保證協商緩存生效，減少帶寬開銷。
數據緩存建議
- 用 SWR、React Query 等庫管理 API 緩存。
- 配合緩存時間和 revalidation 策略（如
stale-while-revalidate）。 - 結合 localStorage / IndexedDB 實現離線緩存支持。
四、如何判斷資源是否命中緩存？
打開瀏覽器開發者工具（DevTools）：
-
刷新頁面
-
Network 面板查看請求
-
看
Status和Size列：200 (from disk cache)：磁盤緩存命中200 (from memory cache)：內存緩存命中304 Not Modified：協商緩存命中
五、緩存未命中
緩存未命中（Cache Miss） 是指在系統嘗試從緩存中讀取數據時，未找到所需數據，因此需要從更慢的存儲介質（比如內存或硬盤）中加載數據的情況。
這會導致訪問延遲增加，是性能優化中需要重點關注的問題。
緩存未命中通常分為以下幾種類型：
-
強制未命中（Compulsory Miss）
- 也叫冷啟動未命中，是指某個數據首次被訪問時，由于之前從未加載過，所以緩存中自然沒有，必須從原始數據源加載。
-
容量未命中（Capacity Miss）
- 緩存容量不足，無法容納所有活躍數據，因此部分數據被替換，后續訪問這些數據時就會發生未命中。
-
沖突未命中（Conflict Miss）
- 在組相聯緩存或直接映射緩存中，不同的數據映射到了同一個緩存位置，導致彼此競爭位置并被替換，從而造成未命中。
舉個例子：假設你打開了一個網頁，網頁上的某張圖片之前沒有加載過——這時候瀏覽器會從服務器下載圖片并緩存起來。這就是強制未命中。下次你再次訪問該頁面，如果緩存被清除或圖片被替換掉了，再加載時就可能是容量未命中或沖突未命中。
總結
緩存命中是前端性能優化的核心手段之一，理解瀏覽器緩存機制、合理配置 HTTP 頭信息、結合應用層緩存工具，可以極大提升用戶體驗。
