前言
最近一個好奇的測試同學問我，你們前端開發完成後，每次都讓我們清快取或者Ctrl+f5強制重新整理，我能不能每次不用強制重新整理，就能看到你們更新的內容呢。我說是可以做到的，我來跟你講講瀏覽器的快取策略。我相信應該有不少的同學在工作中都會遇到這種情況，讓你的測試同學清快取等。
快取
瀏覽器快取是為了節約網路的資源加速瀏覽，瀏覽器在使用者磁碟上對最近請求過的文件進行儲存，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁碟或記憶體中顯示文件，這樣就可以加速頁面的閱覽。
瀏覽器快取主要有兩類：強快取：cache-control，Expires 快取協商：Last-modified ，Etag。
所有的快取策略都是通過http header裡設定的。
強快取
當瀏覽器去獲取資源的時候，不給伺服器發請求，直接從快取中讀取。
Expires（過期時間）
Expires（快取過期時間）是http1.0的產物，用來指定資源的到期時間，是服務端返回的時間點。
從上面圖我們可以看出在Expires: Thu, 20 Jan 2022 07:50:17 GMT在這之後會過期，請求改資源不會從快取中獲取。
缺點: 時間的判斷是通過本地判讀的，如果本地時間調大了，快取可能會失效。
Cache-Control
Cache-Control是http1.1控制快取的重要欄位，如果Cache-Control在，它的優先順序會比Expires高。常用的值如下
| 名稱 | 描述 |
|---|---|
| public | 表示可以被客戶端和代理伺服器快取 |
| private | 表示只可以被客戶端快取 |
| max-age=30 | 單位為秒(s), 表示30s之內，從快取中獲取 |
| s-maxage=30 | 根max-age一樣，表示只在代理中生效 |
| no-sotre | 不快取任何響應 |
| no-cache | 資源被快取，但馬上失效，下次請求會通過協商快取驗證資源是否過去 |
| max-stale=30 | 在30s之內，快取過期也從快取中讀取 |
協商快取
協商快取就是強制快取失效後，瀏覽器攜帶快取標識向伺服器發起請求，由伺服器根據快取標識決定是否使用快取的過程，主要有兩組配合使用：
Last-Modified和If-Modified-SinceEtag和If-None-Match
Last-Modified和If-Modified-Since
瀏覽器在第一次訪問資源的時候，伺服器返回資源的同事，會在Response header中新增Last-Modified的key，表示該資源最後修改時間，瀏覽器接收後快取檔案和header，下次請求該資源，瀏覽器會檢測到有Last-Modified這個請求頭，於是在請求中會新增If-Modified-Since這個請求頭，值就是之前Last-Modified中的值。伺服器收到請求後，會根據If-Modified-Since中的值去判斷資源是否更新。
如果值相等，就返回304狀態碼和空的響應體，瀏覽器收到後會通過快取獲取。可以看下圖
如果不相等，就返回內容和200的狀態碼。
Etag和If-None-Match
Etag是伺服器響應請求時，返回當前資原始檔的一個唯一標識(由伺服器生成)，只要資源有變化，Etag就會重新生成。瀏覽器在下一次載入資源向伺服器傳送請求時，會將上一次返回的Etag值放到Request header裡的If-None-Match，伺服器只需要比較客戶端傳來的If-None-Match跟自己伺服器上該資源的ETag是否一致，就能很好地判斷資源相對客戶端而言是否被修改過了。
如果值相等，就返回304狀態碼和空的響應體，瀏覽器收到後會通過快取獲取。可以看下圖
如果不相等，就返回內容和200的狀態碼。
注意：ETag和If-None-Match優先順序高於Last-Modified和If-Modified-Since，同時存在則只有ETag和If-None-Match生效。
應用部署設定規則
我們知道了瀏覽器的快取之後，在常見的web開發中我們應該怎麼設定呢。
現在大多數的應用是通過webpack打包的，打包生成的資源名稱會帶上hash值。下面是打包後的檔案
我們可以遵循之下規則
index.html入口檔案不加強制快取，設定成協商快取js 資源線上上環境可以設定成強快取。
因為我們每次打包之後，入口檔案會有變化，所以協商快取會失效，會重新從伺服器獲取新的資源。而對應的js資源有hash的變化，所以有變化，會從伺服器中獲取。
結束語
瀏覽器的快取策略，我們就說到這了，快來學習下，跟你的測試小夥伴說一說。
如果你覺得該文章不錯，不妨
1、點贊，讓更多的人也能看到這篇內容
2、關注我，讓我們成為長期關係
3、關注公眾號「前端有話說」，裡面已有多篇原創文章，和開發工具，歡迎各位的關注，第一時間閱讀我的文章