一句話搞懂 HTTP 緩存

剪輯版

瀏覽器經過請求頭 Cache-Control 來控制是否使用緩存資源，經過 ETag 來驗證緩存是否可用。

只要保證想要緩存的資源有這兩個請求頭，而且符合本身想要的策略，就能夠覆蓋大多數場景了。

FBI WARNING

下面是對於一句話的簡單解釋：

對於不想緩存的資源，能夠使用 no-store (不存儲)， no-cache (不使用)

對於想緩存的資源，使用 max-age 來控制緩存的壽命（單位秒），只要緩存在有效期內，那麼獲取資源就會使用緩存的副本，返回的狀態爲 200 from disk 或 200 from memory，由於資源是從緩存中獲取，因此並無發起網絡請求。

若是緩存已通過期，客戶端發起請求時，會攜帶一個 If-None-Match 的頭髮送給服務器，對資源的緩存進行一次檢索。若是文件沒有改變，那麼返回 304，這樣就不用把響應體發送回來了，順便更新一下緩存的新鮮度。若是文件改動了，那麼就把資源從新返回。

下面是廢話：

緩存優先級 Cache-Control > Expires > Last-Modified

驗證優先級 ETag > Last-Modified

ETag 發起 If-None-Match， Last-Modified 發起 If-Modified-Since

通常狀況下不會用到 Cache-Control 的代理和從新驗證的幾個屬性，遇到的時候想到就好。

深刻的重點：

關於緩存驗證，新鮮度，直接看下面的番號吧。對於緩存相關請求頭的詳細信息，請直接查閱 MDN。別人說的再多也不如本身從規範中理解和總結。

重中之重：

學知識上 MDN 和 谷歌開發者社區。

資源番號

• HTTP 緩存 - MDN
• HTTP 緩存 - 谷歌開發者社區

本身動手 豐衣足食

寫了一個小工具，來幫助你們熟悉這幾個請求頭的概念

Github 地址: http-cache-learn

編碼不易，感謝你們素質三連。