除夕小談瀏覽器緩存
什么是瀏覽器緩存？
Browser Caching是瀏覽器將網絡資源存儲在本地的一種行為。
優點有：
-
減少冗余數據的傳輸
-
減輕服務器的壓力
-
縮短網頁的加載速度
可以看出，瀏覽器緩存與性能優化有著千絲萬縷的聯系。
瀏覽器緩存的分類
-
協商緩存
-
強緩存
聽名字可以看出來，這兩類緩存，一個屬于細心的暖男，另一個則是強硬的霸道總裁。
好，參照 這篇文章 ，我們先來了解一下瀏覽器緩存的過程：
-
首先，瀏覽器會去檢查該資源有關緩存的HTTP Header。一個expires，一個cache-control，看是否命中 強緩存 。如果命中則直接從緩存中得到該資源（這次請求不會和服務端進行通信）。
-
如果走到了這一步，說明我們的霸道總裁沒有被翻牌子，那么 協商緩存 這個暖男就該出動了。瀏覽器會發送一個請求到服務端，這個請求會攜帶
一些東西 上一次請求返回的 有關緩存的header字段 （Last-Modified/If-Modified-Since、Etag/IF-None-Match），服務端拿到這些信息后，對比結果看是否命中協商緩存。如果命中，服務端只返回新的響應header更新緩存中的對應header信息（不返回對應資源），瀏覽器get到以后直接從緩存中取得該資源；若沒有命中，服務端返回最新的資源內容。
強緩存
先來看看這個霸道總裁好了。
強緩存主要利用Http Response Header中的兩個字段來控制，分別是 Expires 和 Cache-Control 。
Expires
Expires的值是一個絕對時間的字符串，GMT格式，比如：Expires:Thu, 26 Jan 2017 23:39:02 GMT。這個時間表示的是該資源的有效期限，當請求處于這個時間之前時，均視為命中緩存。
缺點：因為這個時間表示的是資源過期的時間，所以當客戶端和服務端有較大的時間偏差時，咳咳，情況就不妙了。
Cache-Control
Cache-Control是HTTP1.1時出現的頭信息，主要利用其max-age的值來進行判斷，Cache-Control:max-age=1800，表明這個資源的有效期是1800秒，不難看出，和Expires不同，這是一個相對時間。
協商緩存
所謂協商緩存，就是協商嘛，這種情況下客戶端和服務端地位是平等的，不像之前說的強緩存，服務端一個header字段，瀏覽器就要唯命是從。
準確的講，
協商緩存是由服務端來確定緩存資源是否可用，這個情況下，需要客戶端與服務端通過某種標識來進行通信，從而讓服務端判斷請求的資源是否可以通過緩存來訪問。
這個過程涉及到兩組字段（成對出現的字段）：
-
Last-Modified and If-Modified-Since
-
Etag and If-None-Match
上述1和2中的前者都是在第一次請求的響應頭中存在的字段，后者則均存在于后續請求的請求Header中。
成對出現的表現在于： 如果響應頭中沒有前者，則后續的請求頭不會有后者 。
Last Modified/If-Modified-Since
當服務端接收到來自瀏覽器的第一個請求時，服務端在響應的頭中會帶上Last-Modified，是一個GMT的時間字符串，代表著該資源的最后修改時間，例如Last-Modified: Wed, 26 Jan 2017 00:35:11 GMT。
當瀏覽器再次請求相同的資源時，請求的頭中會包含一個If-Modified-Since，這個值就是第一次請求該資源時返回的Last-Modified。服務端會拿這個字段的值和資源上次修改的時間進行對比，如果相同，則說明資源沒有改變，即命中緩存，此時返回304，不會返回相應的資源和Last-Modified。
Etag/If-None-Match
和上一對不同的是，這一對字段的值不是時間，而是一個校驗碼。Etag保證每個網絡資源都是唯一的，資源變化都會導致Etag的變化。當服務端再次收到請求時，根據客戶端上送的If-None-Match來進行判斷，看是否命中協商緩存（過程與Last-Modified/If-Modified-Since相似）。
當兩對字段一起使用時，Etag的優先級大于Last-Modified。
最后
今天是大年三十，那就祝你雞年大吉吧:)
來自：https://segmentfault.com/a/1190000008222598