前端緩存

緩存這個磨人的小妖精，有時候能能提高網頁的訪問速度，有時候又讓咱們前端背鍋。

（老闆指着頁面說：「你這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.協商緩存

協商緩存個人理解是：跟服務器協商下，看看能不能用用戶本地的緩存，能夠的話，狀態碼就是304 Not Modified（未改變）

前提是這個請求沒有命中強緩存，瀏覽器纔會去看看它能不能命中協商緩存，若是仍是沒中，那就正常發請求唄。

（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返回的時間過了這個時間，那就是說明資源已經在服務器更新了，不能再用本地緩存了，那就得發請求重新獲取了。

 

使用緩存流程圖：