除夕小談瀏覽器緩存

什麼是瀏覽器緩存？

Browser Caching 是瀏覽器將網絡資源存儲在本地的一種行爲。
優勢有：

1. 減小冗餘數據的傳輸

2. 減輕服務器的壓力

3. 縮短網頁的加載速度

能夠看出，瀏覽器緩存與性能優化有着千絲萬縷的聯繫。

瀏覽器緩存的分類

1. 協商緩存

2. 強緩存

聽名字能夠看出來，這兩類緩存，一個屬於細心的暖男，另外一個則是強硬的霸道總裁。
好，參照這篇文章，咱們先來了解一下瀏覽器緩存的過程：

1. 首先，瀏覽器會去檢查該資源有關緩存的HTTP Header。一個expires，一個cache-control，看是否命中強緩存。若是命中則直接從緩存中獲得該資源（此次請求不會和服務端進行通訊）。

2. 若是走到了這一步，說明咱們的霸道總裁沒有被翻牌子，那麼協商緩存這個暖男就該出動了。瀏覽器會發送一個請求到服務端，這個請求會攜帶一些東西上一次請求返回的有關緩存的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字段，瀏覽器就要惟命是從。
準確的講，

協商緩存是由服務端來肯定緩存資源是否可用，這個狀況下，須要客戶端與服務端經過某種標識來進行通訊，從而讓服務端判斷請求的資源是否能夠經過緩存來訪問。

這個過程涉及到兩組字段（成對出現的字段）：

1. Last-Modified and If-Modified-Since

2. 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。

最後

今天是大年三十，那就祝你雞年大吉吧:)
來看看我咯