一張圖帶你瞭解瀏覽器緩存機制

話很少說先上圖

優先級

瀏覽器緩存優先級依次爲上圖的從上到下 即： service worker > Cache Control > Expires > Etag > Last-Modified

項目緩存策略

一、頻繁變更的資源

Cache-Control: no-cache

對於頻繁變更的資源，首先須要使用Cache-Control: no-cache 使瀏覽器每次都請求服務器，而後配合 ETag 或者 Last-Modified 來驗證資源是否有效。這樣的作法雖然不能節省請求數量，可是能顯著減小響應數據大小。

二、不常變更的資源

Cache-Control: max-age=XXXXX

一般在處理這類資源時，給它們的 Cache-Control 配置一個很大的 max-age=31536000 (一年)，這樣瀏覽器以後請求相同的 URL 會命中強制緩存。而爲了解決更新的問題，就須要在文件名(或者路徑)中添加 hash， 版本號等動態字符，以後更改動態字符，從而達到更改引用 URL 的目的，讓以前的強制緩存失效 (其實並未當即失效，只是再也不使用了而已)。

用戶行爲對瀏覽器緩存的影響

• 打開網頁，地址欄輸入地址： 查找 disk cache 中是否有匹配。若有則使用；如沒有則發送網絡請求。
• 普通刷新 (F5)：由於 TAB 並無關閉，所以 memory cache 是可用的，會被優先使用(若是匹配的話)。其次纔是 disk cache。
• 強制刷新 (Ctrl + F5)：瀏覽器不使用緩存，所以發送的請求頭部均帶有 Cache-control: no-cache(爲了兼容，還帶了 Pragma: no-cache),服務器直接返回 200 和最新內容。