前言
最近一個好奇的測試同學問我，你們前端開發完成后，每次都讓我們清緩存或者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、關注公眾號「前端有話說」，里面已有多篇原創文章，和開發工具，歡迎各位的關注，第一時間閱讀我的文章