各類瀏覽器緩存淺析

前言

目前瀏覽器的緩存類型衆多，HTTP Cache、Disk Cache、Memory Cache、ServiceWorker Cache、Push Cache 等等，這些緩存是如何產生的？命中優先級是怎麼樣？又該如何去使用它們？

Disk Cache、Memory Cache

Disk Cache、Memory Cache 屬於強緩存，將緩存的響應寫到內存或硬盤中，也屬於 HTTP 緩存的產物。

強緩存是如何產生的？

強緩存的產生依賴於請求響應中的 cache-control 和 expires 的 headers 字段。這兩個字段都是用來設置緩存數據的有效時間。

• expires 是 HTTP 1.0 的產物，表示的是緩存的到期時間，是一個絕對時間。
• cache-control 是 HTTP 1.1 的產物，表示的是緩存的最大可用時長，是一個相對時間。

cache-control 字段的值，也須要搭配相應的字段來使用，經常使用字段：

• max-age：緩存的時長，和 expires 的做用相似，單位是秒。
• no-cache：忽略強緩存，真接走協商緩存。
• no-store：忽略強緩存和協商緩存，直接從服務器獲取響應。
• public：全部的數據均可以被任意地方緩存（例如能夠緩存到 CDN 和代理服務器上）。
• private：默認值，全部內容只有客戶端才能夠緩存。

兩個字段同時存在時，cache-control 優先級最高。

內存緩存和硬盤緩存如何存儲的？

當請求響應符合強緩存時，瀏覽器會根據 header 頭中的字段類型進行緩存處理。一般：

• 內存緩存：會存放 腳本、base64數據和字體等。
• 硬盤緩存：會存放 樣式文件、圖片或比較大的文件等。

此行爲屬於瀏覽器行爲，服務器不可控。

區別

	區別
Disk Cache	- 長期存在：瀏覽器關閉時一樣存在。 - 存儲文件空間更大。
Memory Cache	- 短時間存在：生命週期爲會話級的，回話結束 緩存清除。 - 訪問速度更快。 - 優先級更高。

---

HTTP Cache

這裏主要說的是返回狀態碼爲 304 的這種協商緩存。

當強緩存失效後，瀏覽器就會攜帶緩存標誌向服務器發送請求。這裏主要用到的 header 頭：

• Etag / If-None-Match
• Last-Modified / If-Modified-Since：

當收到請求的響應時，會攜帶：

• Etag：是服務器基於某種規則對資源生成的一個標誌，相似於文件 hash。
• Last-Modified：是服務器返回文件最後修改的時間。

當發送請求的時候，瀏覽器會攜帶：

• If-None-Match：對應的就是 Etag 的值。
• If-Modified-Since：對應的就是 Last-Modified 的值。

服務器根據這兩個值進行匹配，若是相等，說明文件沒有變化，返回 304，瀏覽器直接從緩存裏面取；當不相等時，服務器發送最新的內容，狀態碼爲 200。

---

ServiceWorker Cache

ServiceWorker Cache 屬於新的 PWA Cache Storage API，它有力度更細的程序可操做緩存的能力。

它的命中條件依賴於 fetch，因此它的命中順序以下：

是否從 serviceworker Cache 裏面取緩存，徹底依賴於 serviceworker 的腳本控制，取決於用戶自定義。

---

瀏覽器上對應操做

	強緩存	serviceworker 緩存	協商緩存	緩存 headers 變更
刷新按鈕 或 cmd + r	有效	有效	有效	無變更
cmd + shift + r	無效	無效	無效	請求中無 If-None-Match/If-Modified-Since，Cache-Control 值爲 no-cache。
DevTools Network面板開啓Disable cache	無效	無效	無效	同上，但無緩存的能力更強