瀏覽器緩存機制

everfight 發布于2019-08-06 13:18 / 1573人閱讀

摘要：與不一樣的是，當服務器返回的響應時，由于重新生成過，中還會把這個返回，即使這個跟之前的沒有變化瀏覽器收到的響應后，就會從緩存中加載資源。

瀏覽器緩存基本認識

分為強緩存和協商緩存

瀏覽器在加載資源的時候，會根據這個資源的http header判斷它是否命中強緩存，如果命中，就直接從緩存中讀取資源，不會發請求到服務器。

當強緩存沒有命中的時候，瀏覽器一定會發送一個請求到服務器，通過服務器端一句資源的另外一些http header驗證這個資源是否命中協商緩存，如果協商緩存命中，服務器會將這個請求返回，告訴客戶端可以直接從緩存中加載這個資源，于是瀏覽器就又會從自己的緩存中去加載這個資源。

當協商緩存也沒有命中的時候，瀏覽器直接從服務器加載資源數據。

強緩存原理

強緩存是利用Expires或者Cache-Control這兩個http response header實現的，它們都用來表示客戶端緩存的有效期，請求響應返回的狀態為200

Expire

Expire:Thu, 31 Dec 2037 23:55:55 GMT

1）瀏覽器第一次跟服務器請求一個資源，服務器在返回這個資源的同時，在response的header加上Expires的header；

2）瀏覽器再請求這個資源時，先從緩存中尋找，找到這個資源后，拿出它的Expires跟當前的請求時間比較，如果請求時間在Expire指定的時間之前，就能命中緩存；

3）如果緩存沒有命中，瀏覽器直接從服務器加載資源時，Expire Header在重新加載的時候會被更新

缺點
Exipires是較老的強緩存管理header，由于它是服務器返回的一個絕對時間，在服務器時間與客戶端時間相差較大的時候，緩存管理容易出現問題，比如隨意修改一下客戶端時間就能影響緩存命中的結果。

Cache-Control

Cache-Control: max-age = 315360000

1）瀏覽器第一次跟服務器請求一個資源，服務器在返回這個資源的同時，在response的header加上Cache-Control的header；

2）瀏覽器在接收到這個資源后，會把這個資源連同所有response header一起緩存下來

3）瀏覽器再請求這個資源時，先從緩存中尋找，找到這個資源后，根據它第一次的請求時間和Cache-Control設定的有效期，計算出一個資源過期時間，再拿這個過期時間跟當前的請求時間比較，如果請求時間再過期時間之前，就能命中緩存；

4）如果緩存沒有命中，瀏覽器直接從服務器加載資源時，Cache-Control Header 在重新加載的時候會被更新。

Expire和Cache-Control的聯系和區別

前者描述的是絕對時間，后者是相對時間

可以只啟用一個，也可以同時啟用，同時存在時，Cache-Control優先級高于Expire

如何設置強緩存

1）通過代碼方式，在web服務器返回的相應中添加Expires和Cache-Control Header；

2）通過配置web服務器的方式，讓web服務器在響應資源的時候統一添加Expires和Cache-Control Header

協商緩存的原理

請求響應返回的狀態為304并且會顯示一個Not Modified的字符串，協商緩存是利用的是Last-Modified,If-Modified-since和ETag,If-None-Match這兩對Header來管理的

Last-Modified,If-Modified-since原理

Last-Modified: Tue, 12 Jan 2016 03:08:53 GMT
If-Modified-Since: Tue, 12 Jan 2016 03:08:53 GMT

1）瀏覽器第一次跟服務器請求一個資源，服務器在返回這個資源的同時，在respone的header加上Last-Modified的header，這個header表示這個資源在服務器上的最后修改時間；

2）瀏覽器再次跟服務器請求這個資源時，在request的header上加上If-Modified-Since的header，這個header的值就是上一次請求時返回的Last-Modified的值;

3)服務器再次收到資源請求時，根據瀏覽器傳過來If-Modified-Since和資源在服務器上的最后修改時間判斷資源是否有變化，如果沒有變化則返回304 Not Modified，但是不會返回資源內容；如果有變化，就正常返回資源內容。當服務器返回304 Not Modified的響應時，response header中不會再添加Last-Modified的header，因為既然資源沒有變化，那么Last-Modified也就不會改變，這是服務器返回304時的response header；

4）瀏覽器收到304的響應后，就會從緩存中加載資源；

5）如果協商緩存沒有命中，瀏覽器直接從服務器加載資源時，Last-Modified Header在重新加載的時候會被更新，下次請求時，If-Modified-Since會啟用上次返回的Last-Modified值；

缺點：

有時候服務器上資源其實有變化，但是最后修改時間卻沒有變化，而這種問題又很不容易被定位出來，而當這種情況出現的時候，就會影響協商緩存的可靠性

ETag, If-None-Match原理

ETag: "17fd8-5291a5f96fd20"

1）瀏覽器第一次跟服務器請求一個資源，服務器在返回這個資源的同時，在respone的header加上ETag的header，這個header是服務器根據當前請求的資源生成的一個唯一標識，這個唯一標識是一個字符串，只要資源有變化這個串就不同，跟最后修改時間沒有關系，所以能很好的補充Last-Modified的問題；

2）瀏覽器再次跟服務器請求這個資源時，在request的header上加上If-None-Match的header，這個header的值就是上一次請求時返回的ETag的值；

3）服務器再次收到資源請求時，再根據資源生成一個新的ETag，與瀏覽器傳過來If-None-Match比較，如果這兩個值相同就說明資源沒有變化，否則就是有變化；如果沒有變化則返回304 Not Modified，但是不會返回資源內容；如果有變化，就正常返回資源內容。與Last-Modified不一樣的是，當服務器返回304 Not Modified的響應時，由于ETag重新生成過，response header中還會把這個ETag返回，即使這個ETag跟之前的沒有變化

4）瀏覽器收到304的響應后，就會從緩存中加載資源。

注意的問題

分布式系統里多臺機器間文件的Last-Modified必須保持一致，以免負載均衡到不同機器導致比對失敗；

分布式系統盡量關閉掉ETag(每臺機器生成的ETag都會不一樣）；

云服務器 GPU云服務器三級緩存機制 cdn緩存機制 php緩存機制 android緩存機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/61806.html

Web緩存相關知識整理

摘要：緩存緩存，也叫網關緩存反向代理緩存。瀏覽器先向網關發起請求，網關服務器后面對應著一臺或多臺負載均衡源服務器，會根據它們的負載請求，動態將請求轉發到合適的源服務器上。雖然這種架構負載均衡源服務器之間的緩存沒法共享，但卻擁有更好的處擴展性。一、前言? 工作上遇到一個這樣的需求，一個H5頁面在APP端，如果勾選已讀狀態，則下次打開該鏈接，會跳過此頁面。用到了HTML5 的本地存儲 API ...

rickchen 2019-08-06 13:23 評論0 收藏0
H5 緩存機制淺析 - 移動端 Web 加載性能優化

摘要：根據標準，到目前為止，一共有種緩存機制，有些是之前已有，有些是才新加入的。首次請求緩存有效期內請求緩存過期后請求一般瀏覽器會將緩存記錄及緩存文件存在本地文件夾中。騰訊 Bugly 特約作者：賀輝超 1. H5 緩存機制介紹 H5，即 HTML5，是新一代的 HTML 標準，加入很多新的特性。離線存儲（也可稱為緩存機制）是其中一個非常重要的特性。H5 引入的離線存儲，這意味著 web ...

alin 2019-08-06 13:14 評論0 收藏0
瀏覽器緩存是什么？它的機制又是什么？

摘要：對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢什么是瀏覽器緩存簡單來說，瀏覽器緩存就是把一個已經請求過的資源如頁面，圖片，，數據等拷貝一份副本儲存在瀏覽器中。對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。一方面極大地提升了用戶體驗，而另一方面有時會因為讀取了緩存而展示了錯誤的東西，而在開發過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟...

jsummer 2019-08-06 13:37 評論0 收藏0
瀏覽器緩存是什么？它的機制又是什么？

摘要：對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。那么瀏覽器緩存究竟是個什么樣的神奇玩意呢什么是瀏覽器緩存簡單來說，瀏覽器緩存就是把一個已經請求過的資源如頁面，圖片，，數據等拷貝一份副本儲存在瀏覽器中。對于瀏覽器緩存，相信很多開發者對它真的是又愛又恨。一方面極大地提升了用戶體驗，而另一方面有時會因為讀取了緩存而展示了錯誤的東西，而在開發過程中千方百計地想把緩存禁掉。那么瀏覽器緩存究竟...

godruoyi 2019-08-16 13:43 評論0 收藏0
瀏覽器的緩存機制

摘要：從瀏覽器角度來看，整個就是一個源服務器，從這個層面來說，瀏覽器和服務器之間的緩存機制，在這種架構下同樣適用。如果命中，則返回，告訴瀏覽器資源未更新，可使用本地的緩存。緩存類型緩存在宏觀上可以分成兩類：私有緩存和共享緩存。共享緩存就是那些能被各級代理緩存的緩存。私有緩存就是用戶專享的，各級代理不能緩存的緩存。微觀上可以分下面幾類：瀏覽器緩存緩存存在的意義就是當用戶點擊back按...

LeanCloud 2019-08-06 13:41 評論0 收藏0