浏覽器緩存清理?浏覽器緩存即http緩存，将數據緩存在浏覽器(即客戶端)，今天小編就來聊一聊關于浏覽器緩存清理?接下來我們就一起去研究一下吧!

浏覽器緩存清理

浏覽器緩存即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 Expires

Expires是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 Pragma

Pragma 是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 ETag

ETag 值是一個字符串，其内容通常是數據的哈希值，每個數據都有一個單獨的标志，隻要這個文件發生了改變，這個标志就會發生變化。

服務器可以在響應中返回 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)。

浏覽器會把哪些文件丢進内存中？哪些丢進硬盤中？關于這點，網上說法不一，不過以下觀點比較靠得住：

對于大文件來說，大概率是不存儲在内存中的，反之優先

當前系統内存使用率高的話，文件優先存儲進硬盤

浏覽器緩存是後端還是前端控制呢？

答：的确是服務器設置，但是前端也要知道怎麼設置的。 比如哪些資源緩存，采用何種緩存方式，更新策略如何。

來自：鍊接：http://juejin.im/post/6862711686705938445

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!