網絡學習筆記（三）：HTTP緩存

  HTTP緩存是一種保存資源副本並在下次請求時直接使用該副本的技術，合理的使用緩存能夠有效的提高web性能。
  瀏覽器將js文件、css文件、圖片等資源緩存，當下次請求這些資源時，能夠不發送網絡請求直接從緩存中取出，稱爲緩存命中；或者發送網絡請求驗證緩存而不是從新接收該資源，稱爲再驗證命中。這兩種狀況都可以減小冗餘數據傳輸、下降對服務器的要求、提升web性能。在緩存中沒有找到副本，直接發送請求給服務器稱爲緩存未命中。
  緩存空間有限，不可能將所有資源所有緩存，所以選擇請求頻率高的資源進行緩存頗有必要。另外，當服務器上的資源發生能夠忽略的改變時，但願可以繼續使用緩存而不是從新請求資源；當資源發生須要客戶端知曉的改變時，可以準確的更新緩存內容。這些都須要合理的使用緩存機制。

1、與緩存有關的首部字段

  HTTP報文由起始行、首部和實體組成，緩存機制是由首部中的字段控制，下面分別介紹與緩存有關的首部字段。

一、Pragma與Expires

  Pragma 與 Expires 字段是HTTP/1.0規定的首部，用來向後兼容只支持 HTTP/1.0 協議的緩存服務器。
  Pragma 是通用首部，只有一個值 no-cache ，與 HTTP/1.1 的 Cache-Control: no-cache 效果一致，強制要求緩存在返回緩存的版本以前將請求提交到源頭服務器進行驗證。
  Expires 是響應首部，其值是一個GMT（格林尼治時間），表示資源在該時刻以後過時。這個值是相對服務器上的日期而言的，若是瀏覽器和服務器上的日期不通，則經過這種方式緩存會產生預期以外的狀況。
  須要注意的是： Pragma 的優先級很高。當 Pragma 與 Expires 同時存在時，無論資源有沒有過時，都會發起驗證請求。當 Pragma 與 Cache-Control 同時存在時，也會發起驗證請求。
  Cache-Control 優先級高於 Expires ，若報文中同時出現了 Expires 和 Cache-Control，則以 Cache-Control 爲準。

二、Last-Modified、If-Modified-Since與If-Unmodified-Since

  Last-Modified 是響應首部，其值是一個GMT，表示服務器認定的資源作出修改的時間。包含有 If-Modified-Since 或 If-Unmodified-Since 首部的條件請求會使用該字段。Last-Modified 的時間精確到秒，所以沒法識別一秒內進行屢次修改的狀況。
  If-Modified-Since 是條件式請求首部，其值是上次響應中 Last-Modified 的值。若是服務器在該時間以後修改了資源，則會返回該資源，狀態碼爲200 ；若在該時間以後沒有修改資源，則會返回不帶主體的響應，狀態碼是 304 。該請求首部只能用於 GET 或 HEAD 請求中。當與 If-None-Match 同時出現時，只要服務器支持 If-None-Match ，If-Modified-Since 的值就會被忽略。
  If-Unmodified-Since 是條件式請求首部，若是所請求的資源在指定的時間以後發生了修改，那麼會返回 412 錯誤；當資源在指定的時間以後沒有進行過修改的狀況下，服務器會返回請求的資源。

三、ETag、If-None-Match與If-Match

  ETag 是響應首部，其值是資源的特定版本的標識符，能夠在標識符以前添加弱驗證器標識 W/ ，HTTP 協議默認使用強驗證類型。示例以下：

ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
ETag: W/"0815"

  強驗證類型應用於須要逐個字節相對應的狀況，很難有效地生成。弱驗證類型應用於用戶代理只須要確認資源內容相同便可。即使是有細微差異也能夠接受，好比顯示的廣告不一樣，或者是頁腳的時間不一樣。弱驗證器很容易生成，但不利於比較。
  If-None-Match 是條件式請求首部，其值是ETag值。若是服務器能匹配對應的ETag，這就意味着資源沒有改變，服務器便會發送回一個極短的響應，包含HTTP 「304 未修改」的狀態。304狀態告訴客戶端，它的緩存版本是最新的，並應該使用它。
  If-Match 是條件式請求首部，只有在服務器的資源與 If-Match中指定的 ETag 匹配的時候, 才容許操做。不匹配的話, 服務器返回412狀態碼。

四、Cache-Control

  Cache-Control 是通用首部，其值較多，可以靈活的控制緩存。
  public：響應能夠被客戶端以及代理服務器緩存。
  private：響應能夠被客戶端緩存，不能被代理服務器緩存。
  no-cache: 不建議使用緩存，使用以前要提交服務器驗證。
  no-store: 禁止使用緩存。
  max-age=<seconds>：設置緩存存儲的最大週期，超過這個時間緩存被認爲過時(單位秒)。與Expires相反，時間是相對於請求的時間。
  s-maxage=<seconds>:共享緩存存儲的最大週期，覆蓋max-age或者Expires頭，可是僅適用於共享緩存(好比各個代理)，私有緩存會忽略它。
  must-revalidate: 常常跟no-cache混淆，其準確含義是本地副本過時前，可使用本地副本；本地副本一旦過時，必須去源服務器進行有效性校驗。
  max-stale=<seconds>：代表客戶端願意接收一個已通過期的資源。能夠設置一個可選的秒數，表示響應不能已通過時超過該給定的時間。

2、緩存策略分析

  瀏覽器緩存分爲強緩存、協商緩存，其中強緩存直接使用本地緩存，不發請求到服務器。協商緩存會將緩存資源的信息發送到服務器，由服務器來斷定是否使用本地緩存。

  客戶端是否使用本地緩存的規則如圖所示，下面分別介紹：

一、緩存策略肯定

  緩存策略肯定的第一步是根據上次訪問資源時響應首部判斷是否使用緩存。若是響應首部中有下列字段則不使用緩存，從新發起網絡請求來下載資源。

Cache-Control: no-store
複製代碼

  若是判斷可使用緩存，第二步是肯定是否使用協商緩存，而不是直接使用強緩存。若是響應首部中有如下三種的任一種則將資源信息放入首部發起網絡請求，若服務器斷定緩存資源可用則返回 304 狀態碼，告訴客戶端直接使用緩存資源。若斷定資源不可用則返回 200 狀態碼，並從新發送資源。

Cache-Control：max-age=0
Cache-Control: no-cache
Pragma: no-cache
複製代碼

  若是可使用緩存，且沒必要直接使用協商緩存，則執行第三步：校驗緩存資源新鮮度。若是資源未過時則使用強緩存。資源過時不表明必定不採用，通過服務器確認後資源若未改變則使用該資源，會根據響應頭部來更新資源的新鮮度。

二、強緩存

  服務器經過如下兩個首部字段來爲資源設置「過時日期」，在過時日期以前能夠任意使用該資源而不用發送網絡請求。

Cache-Control：max-age=<seconds>
Expires: <http-date>
複製代碼

  max-age 的值是一個相對於請求的時間，客戶端發起請求時會根據上次請求的時間加上max-age 來判斷資源是否過時。
  Expires的優先級低於 max-age，若是在Cache-Control響應頭設置了 "max-age" 或者 "s-max-age" 指令，那麼 Expires 頭會被忽略。
  有一點須要注意：Last-Modified 首部字段可以計算出一個緩存時間。若是容許使用強緩存，且 max-age 和 expires 屬性都沒有，若存在 Last-Modified 屬性，則能夠計算出一個相似 max-age 的相對「過時日期」。計算公式爲響應首部中 Date 的值減去 Last-Modified 的值乘以 10% 。

三、協商緩存

  協商緩存的主要根據是響應首部中的兩個屬性：Last-Modified、ETag。Last-Modified 是從時間維度來斷定資源是否改變，ETag是從資源id是否改變來判斷資源是否改變的。
  Last-Modified 代表服務器認定的資源作出修改的日期及時間。進行協商緩存時，客戶端請求首部中會加入 If-Modified-Since 屬性，其值爲響應首部的 Last-Modified 屬性。服務器判斷該時間以後是否修改了資源，若是資源被修改，則會返回該資源，狀態碼爲200 ；若沒有修改資源，則返回不帶主體的響應，狀態碼是 304 。
  響應首部中有ETag屬性時，在進行協商緩存時請求首部中會添加 If-None-Match 屬性。ETag 的優先級要高於 Last-Modified，也就是說服務器優先根據 ETag 來判斷資源是否被修改。若是ETag不匹配，則直接返回新的資源，狀態碼爲 200；若是ETag匹配，則說明資源未被修改，返回 304 狀態碼，通知客戶端繼續使用緩存資源。

3、總結

  客戶端根據響應首部肯定緩存策略的步驟爲：首先肯定是否使用緩存，若使用緩存則進一步確認是否直接使用協商緩存。若是沒有強制要求使用協商緩存，優先查看緩存資源是否過時，未過時時使用緩存資源，過時則進行協商緩存。
  協商緩存主要根據 Last-Modified 或 ETag 首部字段來肯定是否使用緩存資源。ETag 的優先級要高於 Last-Modified，在沒有 ETag 的狀況下才會使用 Last-Modified 來斷定。若是服務器斷定資源可用回返回 304 狀態碼，通知客戶端直接使用緩存資源，不然返回 200 狀態碼以及新的資源。

歡迎關注公衆號：前端桃花源，互相交流學習！

參考資料

---

一、完全弄懂 Http 緩存機制 - 基於緩存策略三要素分解法
二、MDN-HTTP緩存
三、HTTP緩存控制小結
四、前端學HTTP之緩存