瀏覽器緩存機制、瀏覽器默認緩存行為

瀏覽器緩存是為了節約網絡的資源加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁面的閱覽。

瀏覽器緩存設置是由服務器端生成的

瀏覽器通過置身機制判定服務器返回的請求頭【cache-control，expires，last-Modified，ETag等】實現緩存，關鍵的請求頭有cache-control，expires，last-Modified，ETag等。

瀏覽器緩存方式有兩種（強緩存和協商緩存）

什么是強緩存：

客戶端第一次問服務器要某個資源時，服務器丟還給客戶端所請求的這個資源同時，告訴客戶端將這個資源保存在本地，並且在未來的某個時點之前如果還需要這個資源，直接從本地獲取就行了，不用向服務器請求。這種方式緩存下來的資源稱為強緩存。

 

如何建立關系：

a.瀏覽器第一次跟服務器請求一個資源，服務器在返回這個資源時，在相應頭部會加上Cache-Control:max-age=xxx（http1.0中是expries字段，同時出現使用cache-control），如下圖：

b.瀏覽器接收到資源后，連同response header一起緩存下來；

c.瀏覽器再次請求同一個資源時，會先從緩存中找到這個資源，獲取date(第一次資源返回的響應時間)和Cache-Control中的max-age並計算出一個有效期(date + max-age)，然后再和瀏覽器請求時間比較最后判斷是否命中緩存；

d.如果沒有命中緩存，瀏覽器直接向服務器發起請求，Cache-Control會在重新獲取到服務器返回資源時更新。

注意：命中強緩存時，瀏覽器同樣會收到status=200的response，chrome中可通過size區分從服務器返回的資源還是強緩存獲得的資源。

 

什么是協商緩存：

客戶端第一次問服務器要某個資源時，服務器丟還給客戶端所請求的這個資源同時，將該資源的一些信息也返回給客戶端，告訴客戶端將這個資源緩存在本地。當客戶端下一次需要這個資源時，將請求以及相關信息一並發送給服務器，由服務器來判斷客戶端緩存的資源是否需要更新：如不需要更新，就直接告訴客戶端獲取本地緩存資源（304）；如需要更新，則將最新的資源連同相應的信息一並返回給客戶端。

如何建立關系：

 

1. 通過 Last-Modified & If-Modified-Since（缺點：無法精確到毫秒）

a.瀏覽器第一次請求一個資源，服務器返回了該資源時，會在response headers中加上Last-Modified，這個response headers表示這個資源在服務器上的最后一次修改時間；

b.當瀏覽器再次請求該資源時，會在request headers中加上If-Modified-Since，這個值即為上一次服務器返回的Last-Modified時間；服務器再次收到資源請求時，將If-Modified-Since時間和資源在服務器上的最后修改時間與對比，如果If-Modifid-Since與最后修改時間一致，則命中緩存，服務器返回304，瀏覽器從緩存中獲取資源；

c.若未命中緩存，服務器返回資源同時，瀏覽器緩存資源的Last-Modified會被更新。

2. 通過ETag & If-None-Match（缺點：ETag本身需要消耗 CPU，而它的優先級比 Last-Modified 高，當它存在時服務器無論 Last-Modified 是否存在都會使用它判斷，ETag在分布式系統中生成的值可能不一樣，會導致緩存失效）

a.瀏覽器第一次請求一個資源，會在response headers中加上ETag（這個ETag是根據該資源生成的唯一標識，這個唯一標識是個字符串，只有服務器認為資源有變化且應該提供新的資源時才會改變ETag），瀏覽器將資源連同ETag一並緩存。

b.當瀏覽器再次請求該資源時，會在request headers中加上If-None-Match，該值即為第一次服務器返回的ETag值；

c.服務器收到資源請求后，會根據要請求的資源重新計算生成相應的ETag，然后與If-None-Match比較。對比結果一致即命中緩存，不一致則未命中緩存，返回資源同時將新的ETag。

如何清除緩存

1. 清除圖片緩存：

通過前端變化，讓js每次生成一個隨機數作參數放在url后邊

2. 清除js、css緩存：

a. 引入js、css文件時加個版本號，如果每次發布新的js代碼，更新對應的版本號。

b. 如果內容較少可以通過script和style標簽將js和css代碼寫到html頁面中，但內容較多時不容易維護

3. 接口緩存：

在請求的接口后面加一個時間戳

4.清除頁面

<meta http-equiv="Cache-control" content="no-cache,max-age=0, must-revalidate,no-store">
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Cache" content="no-cache">

 

瀏覽器存在默認緩存行為，根據瀏覽器不同默認緩存不一樣，火狐瀏覽器默認 【緩存時間=(訪問時間-變更時間）/ 10 】

最新版本Nginx默認在resquest headers中返回Etag值，所以導致靜態文件被緩存