大家不應該僅僅侷限於知道瀏覽器會對請求的靜態檔案進行快取, 但是為什麼被快取, 快取是 怎麼生效的, 也要清清楚楚
理解 http 快取機制的必要性
http 快取機制作為Web效能優化的重要手段, 是計算機知識體系中的一個基礎的環節, 同時也是前端架構師同學的必備技能
快取規則解析
為方便大家理解，我們可以認為瀏覽器存在一個快取資料庫,用於儲存快取資訊. 在客戶端第一次請求資料時，此時快取資料庫中沒有對應的快取資料，需要請求伺服器，伺服器返回後，將資料儲存至快取資料庫中
根據是否需要重新向伺服器發起請求來分類(強制快取, 對比快取)。 首先通過時序圖的方式, 對他們有個簡單的瞭解:
已存在快取資料
僅基於強制快取，請求資料的流程如下:
僅基於對比快取，請求資料的流程如下:
可以看到，強制快取如果生效，不需要再和伺服器發生互動，而對比快取不管是否生效，都需要與服務端發生互動
當執行強制快取的規則時，如果快取生效，直接使用快取，不再執行對比快取規則
強制快取
在沒有快取資料的時候，瀏覽器向伺服器請求資料時，伺服器會將資料和快取規則一併返回， 快取規則資訊包含在響應header中
瀏覽器是如何判斷快取資料是否失效呢
強制快取來機制中，響應header中會有兩個欄位來標明失效規則
- Expires/Cache-Control
Expires 是HTTP 1.0的東西，現在預設瀏覽器均預設使用HTTP 1.1，所以它的作用基本忽略。HTTP 1.1 的版本中，使用Cache-Control替代
對比快取
顧名思義，需要進行比較判斷是否可以使用快取
通過兩圖的對比，我們可以很清楚的發現，在對比快取生效時，狀態碼為304，並且報文大小和請求時間大大減少。 原因是，服務端在進行標識比較後，只返回header部分，通過狀態碼通知客戶端使用快取，不再需要將報文主體部分返回給客戶端
對比快取標識一共分為兩種標識傳遞:
- Last-Modified / If-Modified-Since
- Etag / If-None-Match（優先順序高於Last-Modified / If-Modified-Since）
Etag
伺服器響應請求時，告訴瀏覽器當前資源在伺服器的唯一標識（生成規則由伺服器決定）
If-None-Match
再次請求伺服器時，通過此欄位通知伺服器客戶段快取資料的唯一標識
伺服器收到請求後發現有頭If-None-Match 則與被請求資源的唯一標識進行比對， 不同，說明資源又被改動過，則響應整片資源內容，返回狀態碼200； 相同，說明資源無新修改，則響應HTTP 304，告知瀏覽器繼續使用所儲存的cache
總結
快取使用規則
- 對於強制快取，伺服器通知瀏覽器一個快取時間，在快取時間內，下次請求，直接用快取，不在時間內，執行比較快取策略
- 對於比較快取，將快取資訊中的Etag和Last-Modified通過請求傳送給伺服器，由伺服器校驗，返回304狀態碼時，瀏覽器直接使用快取
瀏覽器請求
參考文章: 徹底弄懂HTTP快取機制及原理