快取這個磨人的小妖精，有時候能能提升網頁的訪問速度，有時候又讓我們前端背鍋。

（老闆指著頁面說：“你這bug不是說改好了嗎？你們這些小年輕，不講碼德啊，來騙我這老同志，這好嗎？這不好，年輕人，耗子尾汁！”，前端瑟瑟發抖，暗想咋回事，我還有碼德這回事？啊不，在我這不是改好了嗎？這bug還認人不成？苦思冥想半天，終於小心翼翼地說：“領導，清一下快取？”）

讓我們來認識一下瀏覽器快取

1.強快取

強快取，顧名思義，它是強勢的，就像你的老闆懂了吧（狗頭）， 如果要請求的資源沒有過期，那就直接用本地快取，都不用發請求和伺服器商量。

強快取分為：Cache-Control、Expires，而Cache-Control的優先順序是高於Expires的，因為Expires是HTTP1.0的產物，現在一般是用Cache-Control，所以Expires就不介紹了。

狀態碼是200 (from disk cache)，直接使用使用者本地的快取。看到這兩個箭頭所指的東西，就是用了強快取。

那強快取有什麼屬性呢？我這裡就說幾個常見的，具體屬性可見Cache-Control

（1）max-age

儲存的最大週期，超過了就是不新鮮的了，瀏覽器就要喜新厭舊啦

Cache-Control: max-age = 3600；

max-age的單位是秒，如果max-age = 0，那其實就是用協商快取，要去驗證內容是否新鮮了。

（2）public

公共的，誰都可以快取這個資源，無論你是客戶端還是代理器，隨便存，即使這個檔案是不該被快取的。

 Cache-Control: public；

（3）no-cache

這個屬性就不可以顧名思義了，這個屬性的意思是強制你要發個請求跟伺服器驗證這個資源是不是新鮮的即協商快取了

 Cache-Control: no-cache；

（4）no-store

這個才是不使用快取

2.協商快取

協商快取我的理解是：跟伺服器協商下，看看能不能用使用者本地的快取。

前提是這個請求沒有命中強快取，瀏覽器才會去看看它能不能命中協商快取，如果還是沒中，那就正常發請求唄。

（1）.Etag & If-None-Match

etag是一個雜湊值，如果etag的值等於If-None-Match，那就命中了，可以使用本地快取了。此外etag優先順序高於Last-Modified，精確度也比Last-Modified高。

請求頭：

響應頭

（2）.Last-Modified & If-Modified-Since

因為這一對的準確度比較低，然後優先順序也低，所以現在用的也少了，配置了強快取和Etag & If-None-Match後，基本就不用配置這個了。

Response Head
Last-Modified:Fri Dec 04 2020 18:18:43 GMT

Request Head
If-Modified-Since:Fri Dec 04 2020 18:18:43 GMT

如果Last-Modified返回的時間過了這個時間，那就是說明資源已經在伺服器更新了，不能再用本地快取了，那就得發請求從新獲取了。

使用快取流程圖：