20170627-HTTP與瀏覽器緩存機制

Coding01 發布于2019-08-06 13:22 / 3128人閱讀

摘要：如果在中指定的值為，則瀏覽器會向服務器發起請求，等待服務器的響應，如果服務器判定資源沒有被修改，則會返回狀態碼，告知瀏覽器直接取緩存中的數據，如果資源發生了改變，則服務器會返回新的資源，并返回狀態碼。

瀏覽器緩存機制 Expires策略

Expires是web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存讀取數據，而無需再次請求。

Web服務器告訴瀏覽器在GMT(格林尼治時間):Tue,27 Jun 2017 02:15:13之前，可以使用緩存文件。

Expires是HTTP 1.0定義的內容，現在大多數瀏覽器默認使用HTTP 1.1，所以它的作用較小。

Cache-Control 1. 緩存控制頭 Cache-Control

Cache-Control是HTTP中，控制緩存行為的首部字段。Cache-Control可以控制瀏覽器是否直接從瀏覽器緩存存取數據還是重新發送請求到服務器獲取數據。Cache-Control的選擇項更多，設置更細致，如果同時設置的話，其優先級高于Expires

2. request header中的Cache-Control

request header中cache-control的可選值有一下幾種：no-cahce,no-store,max-age,max-stale,min-fresh,only-if-cached

在瀏覽器中，發起請求主要有兩種方式：

打開一個鏈接，瀏覽器自動會發起一個請求，這個過程中，沒有辦法指定request header中的cache-control，請求中的cache-control是由瀏覽器指定的，不同的瀏覽器的cache-control的值會有不同,通常情況下cache-control的值為max-age=0

在JavaScript中，我們可以通過Ajax來發起請求，并通過xhr.setRequestHeader("cache-control", "xxx")的方式來指定請求的cache-control的值。

cache-control的值有很多，那么不同的值會如何影響瀏覽器對請求的處理呢？經過我的測試(使用Chrome、Opera瀏覽器)，在大多數情況下(request header中的cache-control的值為：no-store，max-age，max-stale，min-fresh，only-if-cached，對響應內容設置了max-age)，如果請求的資源沒有過期，則瀏覽器不會向服務器發起請求，而是直接從瀏覽器緩存中獲取資源；如果請求的資源過期了，則瀏覽器會向服務器發起請求，等待服務器的響應，如果服務器判定資源沒有被修改，則會返回304狀態碼，告知瀏覽器直接取緩存中的數據;如果資源發生了改變，則服務器會返回新的資源，并返回200狀態碼(服務器是通過if-Modified-Since和if-None-Match來判斷資源是否被修改的 )。

但是，存在兩種例外情況：

如果在request header中指定cache-control的值為no-cache，則瀏覽器會向服務器發起請求，向服務器重新請求資源，無論本地資源有沒有過期、該資源有沒有改變，服務器也會重新傳送一次資源。

如果在request header中指定cache-control的值為mag-age=0，則瀏覽器會向服務器發起請求，等待服務器的響應，如果服務器判定資源沒有被修改，則會返回304狀態碼，告知瀏覽器直接取緩存中的數據，如果資源發生了改變，則服務器會返回新的資源，并返回200狀態碼。

3. response header中的Cache-Control

response header中的cache-control指明了瀏覽器對響應內容的緩存方式

緩存響應指令	說明
no-cache	不緩存過期的資源，在提供緩存資源前必須先向服務器確認有效性
no-store	不緩存響應的任何內容
max-age	響應的最大Age值
public	表明響應可以被任何對象（包括：發送請求的客戶端，代理服務器，等等）緩存
private	表明響應只能被單個用戶緩存，不能作為共享緩存（即代理服務器不能緩存它）
must-revalidate	緩存必須在使用之前驗證舊資源的狀態，并且不可使用過期資源。
no-transform	代理不可更改媒體類型
proxy-revalidate	要求中間緩存服務器對緩存的響應有效性再進行確認
s-maxage	公共緩存服務器響應的最大Age值，針對緩存服務器

瀏覽器接受來自服務器的響應，會根據response header中的cache-control來決定對響應內容進行怎樣的處理，下面詳細說明一些常用的cache-control指令

no-cache:no-cache代表的不是不緩存，它的意思是不緩存過期的資源。一個資源的cache-control值為no-cache，當再次請求該資源時，瀏覽器會向服務器發送請求，確認該資源是否被修改過，如果沒有被修改過，服務器返回響應狀態碼304，瀏覽器從緩存中取得資源；如果服務器中的資源發生了修改，服務器會返回新的資源，并返回響應狀態碼200，瀏覽器從響應體中取得資源

no-store:no-store代表的才是不緩存，如果響應的cache-control的值為no-store，則瀏覽器不會緩存該響應體，當再次請求該資源的時候，瀏覽器會發送請求，從服務器獲取資源。

max-age: 當服務器返回的響應的cache-control的值為max-age=xxx時，在max-age指定的時間范圍之內,瀏覽器將不對資源的有效性(服務器中的資源是否發生改變)再作確認，即當再次請求該資源時，瀏覽器直接從緩存中取得該資源，此時不會向服務器發送請求，但是也會有響應狀態碼(200 OK from disk cache)；當超出max-age指定的時間范圍，瀏覽器會向服務器發送請求，確認服務器中的資源與緩存中的資源是否一致，如果一致，則會返回響應狀態碼304(Not Modified)，瀏覽器直接從緩存中取得資源，如果服務器端的資源發生了變動，則服務器會返回新的資源和響應狀態碼200，瀏覽器從響應體中獲取資源。

Last-Modified與if-Modified-Since

Last-Modified表示服務器端文件的最后修改時間，需要和cache-control共同使用，是檢查服務器端資源是否更新的一種方式。當瀏覽器再次進行請求時，會向服務器傳送If-Modified-Since報頭，詢問Last-Modified時間點之后資源是否被修改過。如果沒有修改，則響應狀態碼碼為為304，使用緩存；如果修改過，則再次去服務器請求資源，響應狀態碼碼為200，資源為服務器最新資源。

Etag與if-None-Match

ETage是服務器根據實體內容生成一段hash字符串，能夠標識資源的狀態，能夠更加準確的控制緩存。當瀏覽器再次請求時，會向服務器傳送if-None-Match報頭，服務器會比較資源的ETage值與if-None-Math的值，來判斷資源是否已經修改，如果沒有修改，則響應狀態碼碼為304，使用緩存；如果修改過，則返回最新資源，響應狀態碼為200，資源為服務器最新資源。

Last-Modified與ETag比較

Last-modified與ETag是可以一起使用的，服務器會優先驗證ETag，一致的情況下，才會繼續對比Last-modified。最后才決定是否返回304.

使用ETag可以解決Last-modified存在的一些問題：

1. 某些服務器不能精確得到資源的最后修改時間，這樣就無法通過最后修改時間判斷資源是否更新 
2. 如果資源修改非常頻繁，在秒以下的時間內進行修改，而Last-modified只能精確到秒 
3. 一些資源的最后修改時間改變了，但是內容沒改變，使用ETag就認為資源還是沒有修改的。

使用緩存流程

強緩存與協商緩存

強緩存：不發送請求到服務器確認資源是否有效，直接從緩存中取得資源

協商緩存：從緩存中取資源前，先向服務器發送請求，確認資源是否有效(過期)，如果資源有效(資源沒有改動)，則服務器返回響應狀態碼304，告知瀏覽器本地緩存可以繼續使用；如果資源失效(資源發生了改動)，則服務器返回新的資源和響應狀態碼200，此時不使用本地失效的資源。

用戶行為對緩存的影響

盜用網上的一張圖，來說明用戶行為對緩存的影響

經過測試，對F5刷新會導致Expires/Cache-Control無效的說法持保留意見

參考資料

淺談Web緩存
Web瀏覽器的緩存機制
MDN: Cache-Control

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

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

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

20170627-HTTP與瀏覽器緩存機制

摘要：如果在中指定的值為，則瀏覽器會向服務器發起請求，等待服務器的響應，如果服務器判定資源沒有被修改，則會返回狀態碼，告知瀏覽器直接取緩存中的數據，如果資源發生了改變，則服務器會返回新的資源，并返回狀態碼。瀏覽器緩存機制 Expires策略 Expires是web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存讀取數據，而無需再次請求。 showI...

Cristic 2019-08-20 17:35 評論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