一篇文章理解前端緩存

說起前端緩存，這真是一個百看百懂，百懂百忘的重災區。每次看的時候都覺得自己懂了，但是過兩天又忘了。究其原因，緩存對前端來說很重要，但是控制權卻是在瀏覽器和服務器手上。作為一個前端開發，我們一般不控制緩存，它對我們來說是透明的。但是這不是我們忘記的理由。為了拯救我自己於水火之中，所以寫了這篇文章，期望於達到“一看就懂，至死不忘”的地步。

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 cache2. 沒有Cache-Control再判斷Expires，再Expires之內，直接返回200 from cache3. Cache-Control=no-cache或者不符合Expires，瀏覽器向服務器發送請求 4. 服務器同時判斷ETag和Last-Modified，都一致，返回304，有任何一個不一致，返回200

3. 總結

弄清楚它們的關係之後，是不是賊簡單，媽媽再也不用擔心我的緩存啦！

閱讀更多 前端小白說 的文章

關鍵字: 瀏覽器 前端 緩存