瀏覽器的緩存機制

娣辯孩發布于2019-08-06 13:20 / 2378人閱讀

摘要：瀏覽器緩存瀏覽器緩存是將文件保存在客戶端。是服務器響應消息頭字段，在響應請求時告訴瀏覽器在過期時間內瀏覽器可以直接從瀏覽器緩存讀取數據，無需再次請求。

緩存分類

web緩存分為很多種，比如數據庫緩存、代理服務器緩存、CDN緩存，以及瀏覽器緩存。
瀏覽器通過代理服務器向源服務器發起請求的原理如圖。

瀏覽器先向代理服務器發起Web請求，再將請求發到源服務器。它屬于共享緩存，所以很多地方都可以使用其緩存資源，所以節省了很多流量。

瀏覽器緩存

瀏覽器緩存是將文件保存在客戶端。在同一個回話過程中檢查緩存的副本是否足夠新，在后退網頁時，訪問過的資源可以從瀏覽器緩存中拿出來使用。

瀏覽器一般都是通過http緩存的，但是也可以通過其他方式，如在html頁面中的meta標簽增加屬性，但不是所有瀏覽器都支持的，因為有些瀏覽器不能理解HTML內容本身

HTTP中的header來控制的緩存

大多數的瀏覽器緩存都是有http的header所決定的。

Expires

Expires: 是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過期時間內瀏覽器可以直接從瀏覽器緩存讀取數據，無需再次請求。但是Expires是HTTP1.0的東西，在HTTP1.1中，他的作用基本上可以忽略。

1.max-age 指定設置緩存最大的有效時間，定義的是時間長短。當瀏覽器向服務器發送請求后，在max-age這段時間里，瀏覽器就不會再向服務器發送請求了。

2.s-maxage與max-age一樣，只用于共享緩存（如CDN緩存）。如s-maxage=60,在這60秒呢，即使更新了CDN的內容，瀏覽器呀不會發送請求。max-age用于普通緩存，而s-maxage用于代理緩存。如果存在s-maxage，則會覆蓋掉max-age和Expires header.

3.public指定響應會被緩存，并且在多用戶間共享。默認是public。

private響應只為私有緩存，不能在用戶間共享

4.設置no-chache表明資源不進行緩存，但是設置了no-cache之后，并不代表瀏覽器不緩存，而是在緩存前要向瀏覽器確認資源是否被更改。有的時候只設置no-cache防止緩存還是不夠保險，還可以加上private指令，將過期時間設為過去的時間。

Cache-control策略

Cache-control策略：與Expires的作用是一致的，都是指當前資源的有效期，控制瀏覽器是直接從瀏覽器緩存中存取數據，還是重新發送請求到服務器取數據。它的優先級高于Expires,而且它的選擇更多，設置也更細致。

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用

Last-Modified: 表示這個資源的最后修改時間。Web服務器在響應請求時，告訴瀏覽器資源的最后修改時間。當瀏覽器再次進行請求時，會向服務器傳送If-Modified-Since抱頭，詢問Last-Modified時間點之后資源是否被修改。

If-Modified-Since: 當資源過期時（用Cache-Control標識的max-age）,發現資源具有Last-Modified聲明，則再次向Web服務器請求頭帶上If-Modified-Since,表示請求時間。Web服務器收到請求后發現有頭信息If-Modified-Since，則與被請求資源的最后修改時間進行比較。若最后修改時間比較新，說明資源修改過，則返回相應整片資源內容（卸載響應消息包體內），HTTP Code為200; 若最后修改時間比較舊，說明資源沒有更新，則相應的HTTP Code為304，告訴瀏覽器使用所保存的緩存。

ETag/If-None-Match

ETag/If-None-Match: 也要配合Cache-Control使用

ETag：web服務器相應請求時，告訴瀏覽器當前資源在服務器的唯一標識（生成規則由服務器產生）。Apache中，ETag的值，默認是對文件的索引節（INode），大小（Size）和最后修改時間（MTime）進行Hash后得到的。

If-None-Match:當資源過期時（使用Cache-Control標識的max-age），發現資源具有ETag聲明，則再次向Web服務器請求時帶上頭信息If-None-Match（ETag的值）。Web服務器收到請求后，頭信息If-None-Cache與被請求的資源進行校驗串比較，然后返回200或者304.

你可能覺得Last-Modified已經足夠讓瀏覽器知道本地緩存是否是最新的，為什么還是要增加ETag呢？
HTTP1.1中的ETag的出現主要為了解決幾個Last-Modified中比較難解決的問題：

Last-Modifed標注的最后修改只能精確到秒，如果某些文件在1秒以內，被修改多次的話，它將不能準確標注文件的修改時間

某些文件會被定期生成，當時內容并沒有發生任何變化，但Modified卻變了，導致文件沒法使用緩存

有可能存在服務器沒有準確獲取文件修改時間，或者與代理服務器的時間不一致等情形

ETag是服務器自動生成，或者由開發者對生成的對應資源在服務器端的唯一標識符，能夠更加準確的控制緩存。Last-Modified與ETag可以一起使用，服務器會優先驗證ETag，一致的情況下，才會繼續對Last-Modifed，最后才決定是否返回304.

cache-control指令的使用

用戶行為和緩存

幾篇不錯的緩存的文章

瀏覽器緩存知識小結及應用
瀏覽器緩存

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/61840.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