> 作者：[鯨騰FE](https://developer.hs.net/user/30291)，來自鯨騰網路。是一支專注於 web 前端的開發團隊，並在 web 前端領域積累了多年疑難問題解決經驗。崇尚高效、優質、成長、自由、快樂。

## 1. 前端快取是什麼？

瀏覽器與伺服器通訊的方式為應答模式，瀏覽器發起 HTTP 請求 – 伺服器響應該請求。那麼瀏覽器第一次向伺服器發起該請求後拿到請求結果，會根據響應報文中 HTTP 頭的快取標識，決定是否快取結果，是則將請求結果和快取標識存入瀏覽器快取中，簡單的過程如下圖：
![image (3).png](https://developer.hs.net/storage/attachments/2022/03/23/WbSnqVX7ZlJLxupvXN4NQwuj141kazbb9wcpHjmR_thumb.png "5567")
瀏覽器每次發起請求，都會**先在瀏覽器快取**中查詢該請求的結果以及快取標識，
瀏覽器每次拿到返回的請求結果都會將該結果和快取標識**存入瀏覽器快取**中。
**瀏覽器快取**( Brower Caching )是瀏覽器對之前請求過的檔案進行快取，以便下一次訪問時重複使用，節省頻寬，提高訪問速度，降低伺服器壓力
**http快取**機制主要在 http 響應頭中設定，響應頭中相關欄位為 Expires、Cache-Control、Last-Modified、Etag。

## 2. 分類

根據是否需要向伺服器重新發起HTTP請求將快取過程分為兩個部分，分為**強快取**和**協商快取**。

### 2.1 強快取：

強快取主要使用 Expires、Cache-Control 兩個頭欄位，兩者同時存在 Cache-Control 優先順序更高。當命中強快取的時候，客戶端不會再請求，直接從快取中讀取內容，並返回HTTP狀態碼200。

#### 2.1.1 Expires

響應頭，代表該資源的過期時間。是一個 GMT 格式的標準時間。
當客戶端請求伺服器的時候，伺服器會返回資源的同時還會帶上響應頭 Expires，表示資源的過期具體時間，如果客戶端在過期時間之前再次獲取該資源，就不需要再請求我伺服器了，可以直接在快取裡面拿。
使用 Expires 強快取優點：
在過期時間以內，為使用者省了很多流量。減少了伺服器重複讀取磁碟檔案的壓力。
使用 Expires 強快取缺點：
快取過期以後，伺服器不管檔案有沒有變化會再次請求伺服器。快取過期時間是一個具體的時間，這個時間依賴於客戶端的時間，如果時間不準確或者被改動快取也會隨之受到影響。

#### 2.1.2 Cache-Control

請求/響應頭，快取控制欄位，精確控制快取策略。
為了讓強快取更精確，HTTP1.1增加了 Cache-Control 欄位。Cache-Control 既能出現在請求頭又能出現在響應頭，其不同的值代表不同的意思
Cache-Control 服務端引數：

| max-age: | 在多少秒內有效，是一個相對時間，這樣比Expires具體的時間就更精確了。當為0的時候就是不使用強快取，類似no-cache。 |
| -------- | -------------------------------------------------------------------------------------------------------------- |
| s-maxage | 就是用於表示 cache 伺服器上（比如 cache CDN，快取代理伺服器）的快取的有效時間的，並只對 public 快取有效。      |
| no-cache | 不使用本地強快取。需要使用快取協商。                                                                           |
| no-store | 不使用本地強快取。需要使用快取協商。                                                                           |
| public   | 可以被所有的使用者快取，包括終端使用者和中間代理伺服器。                                                           |
| private  | 只能被終端使用者的瀏覽器快取，不允許中間快取代理進行快取。                                                       |

Cache-Control 客戶端引數：

| max-stale      | 5 表示客戶端到代理伺服器上拿快取的時候，即使代理快取過期了也不要緊，只要過期時間在 5 秒之內，還是可以從代理中獲取的。     |
| -------------- | ------------------------------------------------------------------------------------------------------------------------- |
| min-fresh      | 5 表示代理快取需要一定的新鮮度，不要等到快取剛好到期再拿，一定要在到期前 5 秒之前的時間拿，否則拿不到。                   |
| only-if-cached | 這個欄位加上後表示客戶端只會接受代理快取，而不會接受源伺服器的響應。如果代理快取無效，則直接返回 504（Gateway Timeout）。 |

### 2.2 協商快取

協商快取主要有四個頭欄位，它們兩兩組合配合使用，If-Modified-Since 和 Last-Modified一組，Etag 和 If-None-Match 一組，當同時存在的時候會以Etag 和 If-None-Match 為主。當命中協商快取的時候，伺服器會返回HTTP 狀態碼 304，讓客戶端直接從本地快取裡面讀取檔案。

| If-Modified-Since | 請求頭，資源最近修改時間，由瀏覽器告訴伺服器。其實就是第一次訪問服務端返回的Last-Modified的值。 |
| ----------------- | ----------------------------------------------------------------------------------------------- |
| Last-Modified     | 響應頭，資源最近修改時間，由伺服器告訴瀏覽器。                                                  |
| Etag              | 響應頭，資源標識，由伺服器告訴瀏覽器。                                                          |
| If-None-Match     | 請求頭，快取資源標識，由瀏覽器告訴伺服器。其實就是第一次訪問服務端返回的Etag的值。              |

#### 2.2.1 If-Modified-Since 和 Last-Modified：

當客戶端第一次請求伺服器的時候，服務端會返回一個 Last-Modified 響應頭，該欄位是一個標準時間。客戶端請求伺服器的時候會帶上If-Modified-Since請求頭欄位，該欄位的值就是伺服器返回的 Last-Modified 的值。伺服器接收到請求後會比較這兩個值是否一樣，一樣就返回304，讓客戶端從快取中讀取，不一樣就會返回新檔案給客戶端並更新 Last-Modified 響應頭欄位的值。

##### 使用If-Modified-Since 和 Last-Modified的優點：

當快取有效時伺服器不會返回檔案給客戶端，而是直接返回304狀態碼，讓客戶端從快取中獲取檔案。大大節省了流量和頻寬以及伺服器的壓力。

##### 使用If-Modified-Since 和 Last-Modified的缺點：

Last-Modified 過期時間只能精確到秒。如果在同一秒既修改了檔案又獲取檔案，客戶端是獲取不到最新檔案的。

#### 2.2.2 Etag 和 If-None-Match

為了解決檔案修改時間只能精確到秒帶來的問題，我們引入 Etag 響應頭。Etag 是由檔案修改時間與檔案大小計算而成，只有當檔案檔案內容或修改時間變了 Etag 的值才會發生變化。當客戶端第一次請求伺服器的時候，服務端會返回一個Etag響應頭。客戶端請求伺服器的時候會帶上 If-None-Match 請求頭欄位，該欄位的值就是伺服器返回的 Etag 的值。伺服器接收到請求後會比較這兩個值是否一樣，一樣就返回304，讓客戶端從快取中讀取，不一樣就會返回新檔案給客戶端並更新Etag響應頭欄位的值。

##### 使用Etag 和 If-None-Match的優點：

當快取有效時伺服器不會返回檔案給客戶端，而是直接返回 304 狀態碼，讓客戶端從快取中獲取檔案。大大節省了流量和頻寬以及伺服器的壓力。並且解決了一秒內修改並讀取的問題。

## 3. 前端怎麼做？

快取是為了緩解請求的壓力，但是我們前端開發遇到更新專案，使用者的專案沒有被更新，而是顯示的是快取的內容，我們如何做？
舊方案：
透過人工自己修改檔名或者在檔名後帶上版本號、時間戳，這樣客戶端就會當新檔案請求並使用，之前的強快取就算在有效期內也會失效。

```
<div></div>
```

現有方案：
使用構建工具比如Wbpack，會根據檔名或檔案內容自動計算hash值來給檔案命名，當內容或檔名發生改變的時候，構建出來的檔名也一定會不一樣，這樣也解決了強快取還在有效期內的問題。

## 4. 快取具體存的位置在哪裡？

按快取位置分類我們可以分為 memory cache、disk cache、Service Worker 三種

Chrome 的開發者工具中，Network -> Size 一列看到一個請求最終的處理方式：如果是大小 (多少 K， 多少 M 等) 就表示是網路請求，否則會列出 from memory cache、from disk cache、from ServiceWorker 就表示命中了快取。
memory cache 是記憶體中的快取，(與之相對 disk cache 就是硬碟上的快取)。按照作業系統的常理：先讀記憶體，再讀硬碟。
![image (4).png](https://developer.hs.net/storage/attachments/2022/03/23/zLQlaVbydRnrtliR4FTyIYI0yIM9q5E6A0RGa8l2_thumb.png "5568")
disk cache 也叫 HTTP cache，顧名思義是儲存在硬碟上的快取，因此它是持久儲存的，是實際存在於檔案系統中的。而且它允許相同的資源在跨會話，甚至跨站點的情況下使用，例如兩個站點都使用了同一張圖片。
![image (5).png](https://developer.hs.net/storage/attachments/2022/03/23/YlUY6qAwIqHMO2dkB0o9tqoOiL7uOGBsrZJpZRcq_thumb.png "5569")
上述的快取策略以及快取/讀取/失效的動作都是由瀏覽器內部判斷進行的，我們只能設定響應頭的某些欄位來告訴瀏覽器，而不能自己操作。

service work 給予了我們另外一種更加靈活，可以直接的操作方式。我們可以從 Chrome 的 Application找到Service Workers。這個快取是永久性的，即關閉 TAB 或者瀏覽器，下次開啟依然還在(而 memory cache 不是)。有兩種情況會導致這個快取中的資源被清除：手動呼叫 API cache.delete(resource) 或者容量超過限制，被瀏覽器全部清空。service work 這裡不做詳細介紹。
可以參考[https://www.bookstack.cn/read/pwa-doc/offline-and-cache-loading-service-worker-service-worker-introduction.md](https://www.bookstack.cn/read/pwa-doc/offline-and-cache-loading-service-worker-service-worker-introduction.md)

前端快取那些事

相關文章