web緩存之瀏覽器緩存

web緩存之瀏覽器緩存淺析

什麼是web緩存

所謂緩存就是再copy一份數據的副本（多是html頁面，圖片，文件），根據副本的存放位置不一樣，又可分爲不一樣的緩存策略，好比瀏覽器緩存，就是將文件存儲再客戶端，再訪問相同的URL時首先檢查副本是否時最新的，若是足夠新的話，直接使用副本，不會再請求服務器，這樣能夠減小服務器請求數量，使用戶得到更好的體驗。

瀏覽器緩存

瀏覽器緩存，主要是HTTP協議定義的緩存，固然也有非HTTP協議的，好比html的meta標籤。
meta標籤提供了不少的屬性用來定義文檔信息，同時也提供了修改HTTP傳輸的屬性。

<meta http-equiv='cache-control' content='no-cache'>

固然這不是今天的重點，今天主要說的是HTTP協議定義的緩存機制。

expires

expires用來設置緩存的過時時間，是web服務器響應消息頭字段，在響應HTTP請求時能夠通知瀏覽器在過時時間之前，能夠直接從瀏覽器的緩存中獲取數據。

cache-control

相比於expires,cache-control的做用幾乎和它是同樣的，雖然都是指明資源的有限期，控制瀏覽器是否從瀏覽器緩存中拉取數據，可是在二者一塊兒設置了的狀況下，cache-control的優先級更高，同時選擇性也更多。
cache-control的值能夠是

1. max-age(單位S)
   設置緩存的最長有效時間，使用的是時間長短，例如說我設置max-age=60,也就是說在請求發出後的60秒內，瀏覽器再次請求時不會再請求服務器，而是從瀏覽器緩存中讀取數據。

2. s-maxage
   與max-age的惟一區別是,s-maxage僅僅應用於共享緩存。而不引用於用戶代理的本地緩存,等針對單用戶的緩存. 另外,s-maxage的優先級要高於max-age。

3. public
   告知任何途徑的緩存者,能夠無條件的緩存該響應，該響應能夠在被多用戶共享。

4. private
   只針對單個用戶緩存響應。且能夠具體指定某個字段，如private –「username」,則響應頭中，名爲username的標頭內容，不會被共享緩存。

5. no-cache
   這個貌似不是很好解釋，那麼先來列一下瀏覽器從服務端請求數據的基本步驟

   1.若是請求命中本地緩存則從本地緩存中獲取一個對應資源的副本 
   2.檢查這個副本是不是最新的,是則直接返回,不然繼續向服務器轉發請求。 
   3.服務器接收到請求，而後判斷資源是否變動，是則返回新內容，不然返回304，未變動。 
   4.客戶端更新本地緩存。

   no-cache會強制跳過步驟2，也就是告訴瀏覽器，要原本來本的轉發請求到服務器，等服務器確認最新了纔可使用。這樣的話no-cache實際上是容許瀏覽器緩存副本，可是老是會校驗緩存是否最新，一旦確認最新，則可使用緩存做爲響應。

6. no-store
   絕對被禁止緩存，每一次請求都要被髮送到服務器而後從新來獲取數據。

7. only-if-cached
   告知瀏覽器,我但願內容來自緩存,我並不關心被緩存響應,是不是新鮮的。

Last-modified

在瀏覽器第一次請求某一個URL時，服務器端的返回狀態會是200，內容是你請求的資源，同時有一個Last-Modified的屬性標記此文件在服務期端最後被修改的時間。
　　客戶端第二次請求此URL時，根據 HTTP 協議的規定，瀏覽器會向服務器傳送 If-Modified-Since 報頭，詢問該時間以後文件是否有被修改過。
　　若是服務器端的資源沒有變化，則自動返回 HTTP 304 （Not Changed.）狀態碼,使用緩存數據。當服務器端代碼發生改變或者重啓服務器時，則從新發出資源，返回和第一次請求時相似。從而保證不向客戶端重複發出資源，也保證當服務器有變化時，客戶端可以獲得最新的資源。

ETag

瀏覽器第一次發送請求時，服務器端會生成一段hash字符串，用來表示本次請求，下一次發送請求時會回傳這個hash字符串到服務器端，服務器會進行校驗，若是發現ETag沒有變化，則會返回304。
OK，蝦面copy別人的兩張圖，很清晰的講解了HTTP瀏覽器的緩存機制。
第一次請求：

再次請求：

參考文章： http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=402653154&idx=1&sn=dc0d70e0329887a0a6be0e8d1468ac99&scene=0#wechat_redirect