一篇文章理解前端緩存

提及前端緩存，這真是一個百看百懂，百懂百忘的重災區。每次看的時候都以爲本身懂了，可是過兩天又忘了。究其緣由，緩存對前端來講很重要，可是控制權倒是在瀏覽器和服務器手上。做爲一個前端開發，咱們通常不控制緩存，它對咱們來講是透明的。可是這不是咱們忘記的理由。爲了拯救我本身於水火之中，因此寫了這篇文章，指望於達到「一看就懂，至死不忘」的地步。

1. 名字解析

工欲善其事必先利其器，在分析整個緩存流程以前，先明確常見的緩存名詞。

1.1 Expires

Expires: HTTP 1.0的規範。用來告訴瀏覽器這個資源的過時時間。

例如： Expires:Sun, 29 Apr 2018 14:21:43 GMT

每次請求這個資源時，瀏覽器自動判斷是否超出了這個時間，若是沒有超出，就直接使用緩存(http status:200 from cache)，不發送請求。若是超出，看其餘參數的狀況。

缺點：因爲Expires這個時間是服務器端的時間，若是客戶端的時間和服務器端的時間有偏差，那麼Expires就沒什麼用了。

1.2 Cache-Control

Cache-Control: HTTP 1.1規範。用來定義緩存的過時時間。

Expires有服務器時間和瀏覽器時間不統一的問題，因此HTTP 1.1新定義了Cache-Control。它是一個通用HTTP頭，能分別在請求報文和響應報文中使用。例如：

Cache-Control有不少值能夠設置，在這裏只介紹兩個最經常使用的。

Cache-Control: no-cache // 瀏覽器不緩存, 返回的結果要看其餘參數的狀況

Cache-Control: max-age=600 // 數字，秒，表示瀏覽器緩存10分鐘，這段時間內即便服務器資源有修改，瀏覽器也不會改變，這段時間內請求，http status是200 from cache

當Cache-Control和Expires同時存在時，Cache-Control會覆蓋Expires。能夠這麼記憶，HTTP 1.1的新生代比老的HTTP 1.0總要有更多的優點。

缺點：沒有缺點。

1.3 ETag

ETag: HTTP 1.1規範。服務器經過算法計算出的資源惟一標誌符（類同Md5碼）。

例如：ETag:"d9f096d1f708c35fdd9c78bd422883cc"

Expires和Cache-Control只決定了瀏覽器是否要發送請求到服務器，並無決定服務器是否要返回資源。決定服務器操做的是另外兩個HTTP頭，ETag和Last-Modified。

瀏覽器在第一次請求時會保留ETag的值，並在下一次請求時經過If-None-Match或If-Match兩個請求頭將ETag傳給服務器。服務器傳來的ETag跟本身的ETag是否一致，就能清楚的知道是否要給瀏覽器新的資源文件。若是二者一致，則http response返回空響應(http status:304)，不然，返回新的資源(http status:200)

缺點：沒有缺點。

1.4 Last-Modified

Last-Modified: HTTP 1.1規範。表示資源在服務器上的最後修改時間。

例如：Last-Modified:Sat, 28 Apr 2018 03:08:34 GMT

瀏覽器在第一次請求時會保留Last-Modified的值，並在下一次請求時經過If-Modified-Since或If-Unmodified-Since兩個請求頭將Last-Modified傳給服務器。服務器比對兩個Last-Modified是否一致。若是二者一致，則http response返回空響應(http status:304)，不然，返回新的資源(http status:200)

唔，這貨與ETag簡直如出一轍有沒有。真的是簡單的一塌糊塗呢，可惡……=_="Last-Modified和Etag都存在的狀況，它們要都符合才能返回304。這也很好理解，都是HTTP1.1的小兄弟，你們權利要統一。

缺點：若是這個資源在服務器上被修改了，可是最後的內容卻沒有變。這時候Last-Modified就匹配不上了，至關於多返回了一個相同的資源文件，浪費了流量。

2. 緩存判斷順序

上面已經說過如下三條規則：

• Expires和Cache-Control決定了瀏覽器是否要發送請求到服務器，ETag和Last-Modified決定了服務器是要返回304+空內容仍是新的資源文件
• Expires和Cache-Control同時存在時，Cache-Control會覆蓋Expires
• ETag和Last-Modified同時存在時，二者都要知足纔會返回304

因此，緩存判斷順序能夠簡單的理解爲：

1. 先判斷Cache-Control，在Cache-Control的max-age以內，直接返回200 from cache
 2. 沒有Cache-Control再判斷Expires，再Expires以內，直接返回200 from cache
 3. Cache-Control=no-cache或者不符合Expires，瀏覽器向服務器發送請求
 4. 服務器同時判斷ETag和Last-Modified，都一致，返回304，有任何一個不一致，返回200

3. 總結

弄清楚它們的關係以後，是否是賊簡單，媽媽不再用擔憂個人緩存啦！好冷的笑話（手動滑稽臉）

參考文檔

1. 《淺談瀏覽器http的緩存機制》