一.概述瀏覽器緩存即http緩存，將數據緩存在瀏覽器(即客戶端)。服務端通過設置HTTP響應頭來決定緩存策略，將資源緩存到本地瀏覽器。二.工作流程http緩存都是從第二次請求開始的。第一次請求資源，服務器返回對應資源，並在response header響應頭中添加緩存策略。第二次請求時，瀏覽器判斷請求參數，命中強緩存就直接200，從本地緩存中拿數據。否則把響應參數存在request header請求頭中，看是否命中協商緩存，命中則返回304，否則服務器會返回全新資源。強緩存與協商緩存強緩存：無需與服務端發生交互協商緩存：需要與服務端發生交互，判斷是否使用本地緩存的文件。三.緩存示例 分析無緩存時，狀態碼200，傳輸size為6.9MB，傳輸時間8.63s。設置協商緩存後，狀態碼304，傳輸size為350B，時間100ms，造成差異的原因時協商緩存發送的是304請求判斷是否使用本地緩存，如果緩存命中，瀏覽器直接從本地拿緩存的文件，6.9MB的文件就不需要走網絡傳輸瞭，因此響應時間會極大的縮短。設置強緩存，傳輸時間為0ms。因為不需要走網絡傳輸瞭，直接走本地緩存，因此響應時間為0。四.幾個控制緩存策略的響應頭強緩存4.1 ExpiresExpires是HTTP/1.0控制網頁緩存的字段，其值為服務器返回該請求的結果緩存的到期時間，即再次發送請求時，如果客戶端的時間小於Expires的值時，直接使用緩存結果。 到瞭HTTP/1.1，Expires已經被Cache-Control替代，原因在於Expires控制緩存的原理是使用客戶端的時間與服務端返回的時間做對比，如果客戶端與服務端的時間由於某些原因（時區不同；客戶端和服務端有一方的時間不準確）發生誤差，那麼強制緩存將直接失效4.2 Cache-Control在HTTP/1.1中，Cache-Control是最重要的規則，主要用於控制網頁緩存，主要取值為：public：所有內容都將被緩存（客戶端和代理服務器都可緩存）private：所有內容隻有客戶端可以緩存，Cache-Control的默認取值no-cache：客戶端緩存內容，但是是否使用緩存則需要經過協商緩存來驗證決定no-store：所有內容都不會被緩存，即不使用強制緩存，也不使用協商緩存max-age=xxx (xxx is numeric)：緩存內容將在xxx秒後失效must-revalidate：告訴瀏覽器、緩存服務器，本地副本過期前，可以使用本地副本；本地副本一旦過期，必須去源服務器進行有效性校驗。在無法確定客戶端的時間是否與服務端的時間同步的情況下，Cache-Control相比於expires是更好的選擇。4.3 PragmaPragma 是HTTP/1.0標準中定義的一個header屬性，請求中包含Pragma的效果跟在頭信息中定義Cache-Control: no-cache相同，但是HTTP的響應頭沒有明確定義這個屬性，所以它不能拿來完全替代HTTP/1.1中定義的Cache-control頭。通常定義Pragma以向後兼容基於HTTP/1.0的客戶端。註：以上三個響應頭，優先級順序為：Pragma>Cache-Control>Expires協商緩存4.4 ETagETag 值是一個字符串，其內容通常是數據的哈希值，每個數據都有一個單獨的標志，隻要這個文件發生瞭改變，這個標志就會發生變化。服務器可以在響應中返回 ETag，然後瀏覽器會在後續的請求中攜帶上這個參數來確定緩存是否需要更新。如果 ETag 值相同，說明資源未更改，服務器會返回 304（Not Modified） 響應碼，瀏覽器就知道本地緩存仍然是可以使用的。4.5 Last-Modified服務器可以通過配置這個響應頭，來向瀏覽器發送一個數據上次被修改的時間標簽，例如：Last-Modified:Wed, 24 Apr 2019 02:54:16 GMT這樣瀏覽器就知道瞭該數據最後被修改的時間，後續請求中，會和服務器進行時間的比較，如果服務器上的時間比本地時間要新，說明數據有更改，瀏覽器需要重新下載數據。五.實例禁用緩存： 啟用協商緩存： 強緩存：分析禁用緩存，就是設置響應頭Cache-Control: no-store，max-age=0。瀏覽器收到響應頭，就會指定制定禁止緩存的策略，下一次請求該資源，就會直接發送200請求。協商緩存，圖片中Cache-Controll設置的實際是強緩存，但Pragma:no-cache是協商緩存，且Pragma優先級更高，因此這裡執行的是協商緩存的策略，發送304請求，把本地資源的版本號、過期時間等信息拼裝到請求頭，來確定是否使用本地緩存。強緩存，這裡幹掉瞭Pragma響應頭，瀏覽器就可以執行強緩存策略瞭，直接from memory cache。瀏覽器緩存的優點1、減少瞭冗餘的數據傳輸2、減少瞭服務器的負擔，大大提升瞭網站的性能3、加快瞭客戶端加載網頁的速度狀態碼為灰色的請求則代表使用瞭強制緩存，請求對應的Size值則代表該緩存存放的位置，分別為from memory cache 和 from disk cache。from memory cache代表使用內存中的緩存，特點：快速讀取「雖然讀取速度高效，但內存必硬盤容量小的多，操作系統需要精打細算內存的使用，所以能讓我們使用的內存必然不多」和時效性「一旦該進程關閉，則該進程的內容則會清空。」from disk cache則代表使用的是硬盤中的緩存。瀏覽器讀取緩存的順序為memory –> disk。內存緩存中有一塊重要的緩存資源是 preloader 相關指令（例如<link rel="prefetch">）下載的資源。眾所周知 preloader 的相關指令已經是頁面優化的常見手段之一，它可以一邊解析 js/css 文件，一邊網絡請求下一個資源。在瀏覽器中，瀏覽器會在js和圖片等文件解析執行後直接存入內存緩存中，那麼當刷新頁面時隻需直接從內存緩存中讀取(from memory cache)；而css文件則會存入硬盤文件中，所以每次渲染頁面都需要從硬盤讀取緩存(from disk cache)。瀏覽器會把哪些文件丟進內存中？哪些丟進硬盤中？關於這點，網上說法不一，不過以下觀點比較靠得住：對於大文件來說，大概率是不存儲在內存中的，反之優先當前系統內存使用率高的話，文件優先存儲進硬盤瀏覽器緩存是後端還是前端控制呢？答：的確是服務器設置，但是前端也要知道怎麼設置的。 比如哪些資源緩存，采用何種緩存方式，更新策略如何。來自：鏈接：https://juejin.im/post/6862711686705938445