從新學習瀏覽器緩存

瀏覽器如何緩存資源？

首先緩存按照位置能夠分爲：service worker、memory cache、disk cache

memory cache

顧名思義，在內存中緩存資源。 事實上全部的請求都會被內存緩存下來，memory cache 的特色是： 時間短——tab 關閉後就會失效； 容量有限，超過容量以後緩存也會失效； 控制權在瀏覽器，先後端沒辦法干涉。

disk cache

硬盤緩存。 也能夠叫作 http 緩存，由於它的緩存規則嚴格遵照 http 頭部規範。 disk cache 的控制權在後端，disk cache 能夠被分爲強緩存和協商緩存。

強緩存

強緩存有兩個相關字段：

Expires：

這是一個響應頭，它的值是一個 http 時間戳，表明在此時間以後，資源會過時。

例如：Expires: Wed, 21 Oct 2015 07:28:00 GMT

注意：

1. 若是設置了一個無效的日期，表明資源已通過期。
2. 若是在 Cache-control 中設置了 max-age 或者 s-max-age ，那麼 Expires 會被忽略。

Cache-control：

這是一個請求和響應中通用的消息字段，經過指定指令來實現緩存。指定指令是單向的，也就是說，請求中設置了，不必定響應中也設置。

多個指令用逗號分隔。

請求指令以下：

//［到期］緩存的最大週期，時間是相對於請求的時間
Cache-Control: max-age=<seconds>
// [可緩存性]強制要求進行協商緩存
Cache-control: no-cache  
//［可緩存性］不緩存任何請求或響應的內容
Cache-control: no-store 
複製代碼

響應指令以下：

Cache-Control: max-age=<seconds>
//［從新驗證和從新加載］若是驗證過時了，須要進行協商緩存
Cache-control: must-revalidate
Cache-control: no-cache
Cache-control: no-store
//［可緩存性］能夠被任何對象（客戶端、代理服務器）緩存
Cache-control: public
//［可緩存性］只能被單個用戶緩存，不能做爲共享緩存（好比代理服務器不能緩存）
Cache-control: private
複製代碼

協商緩存

協商緩存即條件請求，不知足條件不緩存。

Last-Modified 、If-Modified-Since 、If-Unmodified-Since

Last-Modified 是響應頭，包含服務器認定的資源作出修改的時間。精確度比 Etag 低。

If-Modified-Since 、If-Unmodified-Since 在條件請求中會使用 Last-Modified 的值。

• 對於 GET、HEAD 請求，若是請求的資源從 If-Modified-Since 那個時間以後沒有被修改過，就返回一個不帶消息主體的 304 ，不然返回 200。

• 對於 POST 、PUT 或其餘 non-safe 方法的請求，若是資源從 If-Unmodified-Since 以後被修改了，就會返回 412 錯誤。

Etag 、 If-Match 和 If-None-Match

Etag 是響應頭，是資源的特定版本標識符，可讓緩存更高效，同時能夠節省帶寬。由於資源內容若是沒變，web 服務器不須要發送完整的響應。

If-Match 和 If-None-Match 是請求頭，值是從 Etag 中拿到的。

與 If-Modified-Since 一同使用時，If-None-Match 優先級更高。

兩個例子說明 Etag 的用途：

一、POST PUT DELETE 等，返回 412 ，避免「空中碰撞」

好比用戶 a 編輯 wiki 時，當前的文檔內容響應中有：

Etag ："33a64df551425fcc55e4d42a148795d9f25f89d4"
複製代碼

更改了文檔，保存時， POST 請求將以前的 Etag 放入 If-Match 中，用來檢查是否保存的是最新版本：

If-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
複製代碼

若是不匹配，意味着文檔已經被另外一我的編輯了，拋出 412 錯誤。

二、GET HEAD ，判斷客戶端資源是否可用

若是用戶請求裏帶着 Etag 再次訪問給定的 url ，被提示資源過時了且不可用，客戶端就把 Etag 放在 If-None-Match 中：

If-None-Match: "33a64df551425fcc55e4d42a148795d9f25f89d4"
複製代碼

服務器將客戶端的 If-None-Match 帶來的值與當前資源的 Etag 進行比較，若是匹配，服務器將返回不帶任何內容的 304 狀態碼。

service worker

memory cache 沒法控制，disk cache 只能經過設置頭部信息，由瀏覽器內部進行判斷。

但經過 service worker 的 api ，咱們能夠控制緩存，包括數據、靜態資源、甚至攔截網絡請求。

service worker 操做的緩存能夠在 application -> cache storage 中看到，除非容量超過限制或者手動清除了，不然永久存在。