HTTP 304/200(from cache) 靜態資源緩存原理

Http 206 文件斷點續傳下載原理

HTTP 204/205狀態響應&HEAD請求

 

基礎知識

一.304靜態資源離線緩存

1)關於 Last-Modified

　　在瀏覽器第一次請求某一個URL時，服務器端的返回狀態會是200，資源響應頭有一個Last-Modified的屬性標記此文件在服務期端最後被修改的時間，另一半也有個Etag，格式相似這樣：

Last-Modified:Fri, 15 Feb 2013 03:06:18 GMT
ETag:"be15b26c29bce1:0" #可選，這裏爲了準確確認資源是否變化

舉例：

　　

客戶端第二次請求此URL時，根據 HTTP 協議的規定，瀏覽器會向服務器傳送 If-Modified-Since和If-None-Match(可選報頭，值Etag的值) 報頭，詢問該時間以後文件是否有被修改過：
　

If-Modified-Since:Sat, 16 Feb 2013 07:30:07 GMT
If-None-Match:"be15b26c29bce1:0" #可選，這裏爲了準確確認資源是否變化

舉例：

　　

若是服務器端的資源沒有變化，則自動返回 HTTP 304 （Not Changed.）狀態碼，內容爲空，不然從新發起請求，請求下載資源這樣就節省了傳輸數據量。當服務器端代碼發生改變或者重啓服務器時，則從新發出資源，返回和第一次請求時相似。從而保證不向客戶端重複發出資源，也保證當服務器有變化時，客戶端可以獲得最新的資源。

 

2) 什麼是」Etag」?

　　HTTP 協議規格說明定義ETag爲「被請求變量的實體值」 。 另外一種說法是，ETag是一個能夠與Web資源關聯的記號（token）。典型的Web資源能夠一個Web頁，但也多是JSON或XML文檔。服務器單獨負責判斷記號是什麼及其含義，並在HTTP響應頭中將其傳送到客戶端，如下是服務器端返回的格式：
　　ETag: "50b1c1d4f775c61:df3"
　　客戶端的查詢更新格式是這樣的：
　　If-None-Match: W/"50b1c1d4f775c61:df3"
　　若是ETag沒改變，則返回狀態304而後不返回，這也和Last-Modified同樣。本人測試Etag主要在斷點下載時比較有用。

 

    ETag出現的歷史緣由是Last-Modified只作到了 「秒級別」的驗證，沒法辨識毫秒，微妙級別的校驗，所以纔出現了ETag。

   ETag的出現，意味着客戶端須要需求的升級，所以If-None-Match，If-Match,If-Range隨之用來驗證文件變化。

 

3) Last-Modified和Etags如何幫助提升性能?
　　聰明的開發者會把Last-Modified 和ETags請求的http報頭一塊兒使用，這樣可利用客戶端（例如瀏覽器）的緩存。由於服務器首先產生 Last-Modified/Etag標記，服務器可在稍後使用它來判斷頁面是否已經被修改。本質上，客戶端經過將該記號傳回服務器要求服務器驗證其（客戶端）緩存。
　　過程以下:

1. 客戶端請求一個頁面（A）。

2. 服務器返回頁面A，並在給A加上一個Last-Modified/ETag。

3. 客戶端展示該頁面，並將頁面連同Last-Modified/ETag一塊兒緩存。

4. 客戶再次請求頁面A，並將上次請求時服務器返回的Last-Modified/ETag一塊兒傳遞給服務器。

5. 服務器檢查該Last-Modified或ETag，並判斷出該頁面自上次客戶端請求以後還未被修改，直接返回響應304和一個空的響應體。

6. 此外，若是緩存服務器版本，類型不一樣，建議使用Last-Modified，Etag可能形成緩存沒法驗證的問題

二.緩存有效期期的實現（Cache-Control與Expires）

　　HTTP中，經過Cache-Control首部和Expires首部爲文檔指定了過時時間，經過對過時時間的判斷，緩存就能夠知道文檔是否是在保質期內。Expires首部和Cache-Control:max-age首部都是來告訴緩存文檔有沒有過時，爲何須要兩個響應首部來作這件簡單的事情了？其實這一切都是歷史緣由，Expires首部是HTTP 1.0中提出來的，由於他使用的是絕對日期，若是服務端和客戶端時鐘不一樣步的話（實際上這種狀況很是常見），緩存可能就會認爲文檔已通過了保質期。

　　HTTP 1.1爲了修正這個問題，引入了Cache-Control:max-age首部，這個首部使用相對時間來控制保質期，讓一切變得更加合理。舉個例子，咱們買了一瓶汽水，若是使用Expires首部來標註保質期，就會這麼寫：飲料過時時間：2012年12月21日，若是某個2貨不知道今天多少號，他還真不知道這飲料過時沒，我小時候飲料都這麼寫。後來，有個挺有名的賣牛奶的，大概就叫蒙牛，他發明了一種標註保質期的方法，他怎麼搞了？他這麼寫：保質期：12個月，行，牛逼了，我牛奶一年前就生產出來的牛奶，今天要發給廠家，發以前，先往包裝上印上生產日期（固然是印發貨那天），而後告訴你，明年才過時，這多聰明，搞成相對的，毒死你。也許HTTP 1.1借鑑了這個偉大的發明，因而就有了Cache-Control:max-age首部。

 

1) Last-Modified&Cache-Control 與 Expire比較

《1》Last-Modified & Cache-Control
設置 header("Last-Modified: ".gmdate("D, d M Y H:i:s", time() )." GMT"); 
Last-Modified雖然使用了緩存，可是每次打開頁面依然須要向服務器發起http請求，瀏覽器根據用戶的$_SERVER['HTTP_IF_MODIFIED_SINCE']來判斷瀏覽器的內容是否過時，沒過時的話返回304狀態，瀏覽器內容從緩存中讀取。

此外 Cache-Control也很重要，若是他的值是max-age=0，max-stable,min-refresh等於0或no-store之類的，緩存是不會被緩存的,每次都會請求服務器。若是是max-age，max-stable,min-refresh[大於0]或only-if-cached，immutable，那麼極可能出現 from cache現象。

《2》Expires緩存控制
設置 header("Expires: ".gmdate("D, d M Y H:i:s", time()+$cache_time )." GMT"); 
狀態碼依然是200，時間依然是舊的時間，Size欄目顯示爲from cache，表示內容是直接從瀏覽器讀取，瀏覽器根本就沒有向服務器發起http請求。

 

 

2）200 OK (from cache)  實現方案

Status 200 Ok (from cache)出現的條件是Cache-Control或者Expires知足必定的條件。

 

注意：緩存控制是服務器進行報頭建議，如下報頭是響應頭，不是請求頭

2.1 使用 Cache-Control 

1.[(max-age|max-stable|min-refresh) = 緩存建立時間 < 當前系統時間][immutable][only-if-cached]
2.緩存必須帶有ETag或者Last-Modified

Cache-Control：public,Max-Age=84800
ETag:"f6c01531e9c65fa96f3d40409fd030f1"

2.2 Expires不能過時

Expires：Sun, 31 Jul 2016 00:19:47 GMT

以上2種方案只要實現一種便可實現資源from cache

 

對於瀏覽器而言，還有一種數據是 DataURL協議的數據，這種數據也會從緩存讀取，實現from cache ,可是，若是將全部數據轉碼成DataURL,會出現性能問題。

 

 

三.緩存使用技巧

①.不管是開發階段仍是生產階段，建議使用Cache-Control + Last-Modified或Tag控制緩存

②.開發階段， 建議使用Cache-Control:[no-cache,no-store|Max-Age=0]這樣能夠阻止瀏覽器使用緩存

③不管是開發階段仍是生產階段，若是是永遠不會被更改的資源，那麼建議使用緩存Cache-Control:[Max-Age=3600][only-if-cached][immutable] 從而實現from cache，減小http請求。

④.若是是生產階段建議使用Cache-Control:Max-Age=3600[no-cache|] ，緩存1小時，每次必須到服務器進行校驗

⑤禁止緩存

Cache-Control: no-cache, no-store, must-revalidate

⑥緩存靜態資源也能夠加上public，實現跨域緩存共享

Cache-Control:public, max-age=31536000

 ⑦ must-revalidate，校驗本地緩存是否過時，過時了纔去請求服務器更新緩存

 ⑧ 默認狀況下，Cache-Control:public緩存都回去和服務器校驗的