摘要：瀏覽器緩存只存在于每個(gè)多帶帶的客戶端，因此它是私有緩存。表示該資源既能被瀏覽器緩存，也能被任何中間人比如代理服務(wù)器等緩存。普通刷新會(huì)啟用協(xié)商緩存，忽略強(qiáng)緩存。只有在地址欄或收藏夾輸入網(wǎng)址通過(guò)鏈接引用資源等情況下，瀏覽器才會(huì)啟用強(qiáng)緩存。

在訪問(wèn)一個(gè)網(wǎng)頁(yè)時(shí)，客戶端會(huì)從服務(wù)器下載所需的資源。但是有些資源很少發(fā)生變動(dòng)，例如 HTML、JS、CSS、圖片、字體文件等。如果每次加載頁(yè)面都從源服務(wù)器下載這些資源，不僅會(huì)增加獲取資源的時(shí)間，也會(huì)給服務(wù)器帶來(lái)一定壓力。因此，重用已獲取的資源十分重要。將請(qǐng)求的資源緩存下來(lái)，下次請(qǐng)求同一資源時(shí)，直接使用存儲(chǔ)的副本，而不會(huì)再去源服務(wù)器下載。這就是我們常說(shuō)的緩存技術(shù)。

緩存的種類很多：瀏覽器緩存、網(wǎng)關(guān)緩存、CDN 緩存、代理服務(wù)器緩存等。這些緩存大致可以歸為兩類：共享緩存和私有緩存。共享緩存能夠被多個(gè)用戶使用，而私有緩存只能用于單個(gè)用戶。瀏覽器緩存只存在于每個(gè)多帶帶的客戶端，因此它是私有緩存。

本文主要介紹私有（瀏覽器）緩存。你將學(xué)習(xí)：

瀏覽器緩存的分類

如何啟用和禁止緩存

緩存存儲(chǔ)的位置

如何設(shè)置緩存的過(guò)期時(shí)間

緩存過(guò)期之后會(huì)發(fā)生什么

如何為自己的應(yīng)用制定合適的緩存策略

調(diào)試

如何判斷網(wǎng)站是否啟用了緩存

如何禁用瀏覽器緩存

瀏覽器會(huì)根據(jù) HTTP Response Headers 中的一些字段來(lái)決定是否要緩存該資源。通過(guò)設(shè)置 Response Headers 中的?Cache-Control?和?Expires?可以啟用緩存，這樣資源就會(huì)被緩存到客戶端。

Cache-Control?可以設(shè)置?private?、public 、max-age?、?no-cache?來(lái)啟用緩存。

Cache-Control: private/public
Cache-Control: max-age=300
Cache-Control: no-cache

private?：表示該資源只能被瀏覽器緩存。

public?：表示該資源既能被瀏覽器緩存，也能被任何中間人（比如代理服務(wù)器、CDN 等）緩存。

max-age?：表示該資源能夠被緩存的最大時(shí)間。如果設(shè)置 max-age=0?，該資源仍然會(huì)被瀏覽器緩存，只不過(guò)立刻就過(guò)期了。

no-cache?：該資源會(huì)被緩存，但是立刻就過(guò)期了，因此需要先和服務(wù)器確認(rèn)資源是否發(fā)生變化，只有當(dāng)資源沒(méi)有變化時(shí)，該緩存才會(huì)被使用，否則需要從服務(wù)器下載。相當(dāng)于?max-age=0?。

Expires?標(biāo)識(shí)了緩存的具體過(guò)期時(shí)間，來(lái)控制資源何時(shí)過(guò)期。通過(guò)設(shè)置?Expires?可以啟用緩存。不過(guò)需要注意 Expires 的值是格林威治時(shí)間（Greenwich Mean Time, GMT），不是本地時(shí)間。

Expires: Fri, 08 Mar 2029 08:05:59 GMT
Expires: 0 // Expires: 0 仍然會(huì)啟用緩存，只不過(guò)緩存立刻過(guò)期。

既然 Cache-Control 和 Expires 都能夠啟用緩存，那么問(wèn)題來(lái)了，如果同時(shí)設(shè)置?Cache-Control: max-age=600?和?Expires: 0?，那么瀏覽器應(yīng)該如何緩存該資源呢？答案是只有?Cache-Control: max-age=600?生效。因?yàn)?Cache-Control 的優(yōu)先級(jí)高于?Expires，如果同時(shí)設(shè)置了 Cache-Control 和 Expires，以 Cache-Control 為準(zhǔn)。

設(shè)置 Cache-Control 之后，可以看到瀏覽器確實(shí)啟用了緩存（from disk cache)。如下所示：

Cache-Control:max-age=604800, must-revalidate, public

但是我發(fā)現(xiàn)，即使 Response Header 中沒(méi)有設(shè)置 Cache-Control 和 Expires，瀏覽器仍然會(huì)緩存某些資源。這是為什么呢？

原來(lái)當(dāng) Response Header 中有 Last-Modified 但是沒(méi)有 Cache-Control 和 Expires 時(shí)，瀏覽器會(huì)用一套自己的算法來(lái)決定這個(gè)資源會(huì)被緩存多長(zhǎng)時(shí)間。這是瀏覽器為了提升性能進(jìn)行的優(yōu)化，每個(gè)瀏覽器的行為可能不一致，有些瀏覽器上甚至沒(méi)有這樣的優(yōu)化。因此，如果要啟用緩存，還是應(yīng)該自己設(shè)置合適的 Cache-Control 和 Expires，不要依賴瀏覽器自身的緩存算法。當(dāng)然，如果在調(diào)試時(shí)發(fā)現(xiàn)本應(yīng)該更新的文件沒(méi)有更新，也別忘了看看是否被瀏覽器緩存了。

給?Cache-Control?設(shè)置?no-store?會(huì)禁止瀏覽器和中間人緩存該資源。在處理包含個(gè)人隱私數(shù)據(jù)或銀行業(yè)務(wù)數(shù)據(jù)的資源時(shí)很有用。

Cache-Control: no-store

一般來(lái)說(shuō)，瀏覽器緩存只能存儲(chǔ)?GET?響應(yīng)，例如 HTML、JS、CSS、圖片等靜態(tài)資源。因?yàn)檫@些資源不經(jīng)常發(fā)生變化，所以緩存可以幫助提升獲取資源的速度。但是像一些 POST/DELETE 請(qǐng)求，這些請(qǐng)求基本上每一次都不一樣，因此也沒(méi)有什么緩存的價(jià)值。

瀏覽器可以在內(nèi)存、硬盤中開(kāi)辟一個(gè)空間用以保存請(qǐng)求資源的副本。我們經(jīng)常在 Dev Tools 里面看到?Memory Cache（內(nèi)存緩存）和 Disk Cache（硬盤緩存），指的就是緩存所在的位置。請(qǐng)求一個(gè)資源時(shí)，會(huì)按照優(yōu)先級(jí)（Service Worker ->?Memory Cache -> Disk Cache ->?Push Cache）依次查找緩存，如果命中則使用緩存，否則發(fā)起網(wǎng)絡(luò)請(qǐng)求。這里只介紹常用的 Memory Cache 和 Disk Cache。

200 from Memory Cache

表示不訪問(wèn)服務(wù)器，直接從內(nèi)存中讀取緩存。因?yàn)榫彺娴馁Y源保存在內(nèi)存中，所以讀取速度較快，但是關(guān)閉進(jìn)程之后，緩存的資源也會(huì)隨之銷毀。一般來(lái)說(shuō)，系統(tǒng)不會(huì)給內(nèi)存分配較大的容量，因此內(nèi)存緩存一般用于存儲(chǔ)小文件。同時(shí)，內(nèi)存緩存在有時(shí)效性要求的場(chǎng)景下也很有用（比如瀏覽器的隱私模式）。

200 from Disk Cache

表示不訪問(wèn)服務(wù)器，直接從硬盤中讀取緩存。與內(nèi)存相比，硬盤的讀取速度較慢，但是硬盤緩存持續(xù)的時(shí)間更長(zhǎng)，關(guān)閉進(jìn)程之后，緩存的資源仍然存在。由于硬盤的容量較大，因此一般用于存儲(chǔ)大文件。

總的來(lái)說(shuō)就是：

內(nèi)存緩存：讀取快、持續(xù)時(shí)間短、容量小

硬盤緩存：讀取慢、持續(xù)時(shí)間長(zhǎng)、容量大

瀏覽器緩存一般分為兩類：強(qiáng)緩存（也稱本地緩存）和協(xié)商緩存（也稱弱緩存）。判定過(guò)程如下：

瀏覽器發(fā)送請(qǐng)求前，會(huì)先去緩存里面查看是否命中強(qiáng)緩存，如果命中，則直接從緩存中讀取資源，不會(huì)發(fā)送請(qǐng)求到服務(wù)器。否則，進(jìn)入下一步。

當(dāng)強(qiáng)緩存沒(méi)有命中時(shí)，瀏覽器一定會(huì)向服務(wù)器發(fā)起請(qǐng)求。服務(wù)器會(huì)根據(jù) Request Header 中的一些字段來(lái)判斷是否命中協(xié)商緩存。如果命中，服務(wù)器會(huì)返回響應(yīng)，但是不會(huì)攜帶任何響應(yīng)實(shí)體，只是告訴瀏覽器可以直接從緩存中獲取這個(gè)資源。否則，進(jìn)入下一步。

如果前兩步都沒(méi)有命中，則直接從服務(wù)器加載資源。

強(qiáng)緩存和協(xié)商緩存的共同點(diǎn)在于，如果命中，都是從客戶端緩存中加載資源，而不是從服務(wù)器加載資源。而不同點(diǎn)在于，強(qiáng)緩存不發(fā)送請(qǐng)求到服務(wù)器，而協(xié)商緩存會(huì)發(fā)送請(qǐng)求到服務(wù)器以驗(yàn)證資源是否過(guò)期。普通刷新會(huì)啟用協(xié)商緩存，忽略強(qiáng)緩存。只有在地址欄或收藏夾輸入網(wǎng)址、通過(guò)鏈接引用資源等情況下，瀏覽器才會(huì)啟用強(qiáng)緩存。

當(dāng)緩存過(guò)期之后，瀏覽器會(huì)向服務(wù)器發(fā)起 HTTP 請(qǐng)求，以確定資源是否發(fā)生了變化。如果資源未改變，那么瀏覽器會(huì)繼續(xù)使用本地的緩存資源；如果該資源已經(jīng)發(fā)生變化了，那么瀏覽器會(huì)刪除舊的緩存資源，并將新的資源緩存到本地。

Http Response Header 里面的?Cache-Control: max-age=xxx?和 Expires?都可以設(shè)置緩存的過(guò)期時(shí)間，但是它們有一些區(qū)別：

Expires?：標(biāo)識(shí)該資源過(guò)期的時(shí)間點(diǎn)，它是一個(gè)絕對(duì)值，即在這個(gè)時(shí)間點(diǎn)之后，緩存的資源過(guò)期。
max-age?：標(biāo)識(shí)該資源能夠被緩存的最大的時(shí)間。它是一個(gè)相對(duì)值，相對(duì)于第一次請(qǐng)求該文檔時(shí)服務(wù)器記錄的「請(qǐng)求發(fā)起時(shí)間」。

雖然 Cache-Control?是 HTTP 1.1 提出來(lái)的新特性，但并不是說(shuō) max-age 優(yōu)于 Expires。它們都有各自的使用場(chǎng)景，我們應(yīng)該根據(jù)業(yè)務(wù)需求去決定使用哪一個(gè)。比如當(dāng)某個(gè)資源需要在特定的時(shí)間點(diǎn)過(guò)期時(shí)應(yīng)該使用 Expires?。如果只是為了開(kāi)啟緩存，使用 max-age?可能會(huì)更好些，因?yàn)?Cache-Control?的優(yōu)先級(jí)高于 Expires。

針對(duì)應(yīng)用中幾乎不會(huì)改變的文件，通常可以設(shè)置一個(gè)較長(zhǎng)的過(guò)期時(shí)間，以保證緩存的有效。例如圖片、CSS、JS 等靜態(tài)資源。

上一小節(jié)已經(jīng)提到，當(dāng)瀏覽器請(qǐng)求一個(gè)資源時(shí)，如果發(fā)現(xiàn)緩存中有該資源，但是已經(jīng)過(guò)期了，那么瀏覽器就會(huì)向服務(wù)器發(fā)起 HTTP 請(qǐng)求，以驗(yàn)證緩存的資源是否發(fā)生變化。

什么時(shí)候會(huì)進(jìn)行緩存驗(yàn)證？

刷新頁(yè)面。一般來(lái)說(shuō)，為了確保用戶獲取到最新的數(shù)據(jù)，在刷新頁(yè)面時(shí)大部分瀏覽器都不會(huì)再使用緩存中的數(shù)據(jù)，而是發(fā)起一個(gè)請(qǐng)求去服務(wù)器驗(yàn)證。

Response Header 中設(shè)置了 Cache-control: must-revalidate。當(dāng)緩存的資源過(guò)期之后，必須到源服務(wù)器去驗(yàn)證，只有確認(rèn)該資源沒(méi)有過(guò)期，才能繼續(xù)使用緩存。

服務(wù)器是怎么判斷資源改變與否的呢？服務(wù)端在返回響應(yīng)內(nèi)容的同時(shí)，還會(huì)在?Response Header 中設(shè)置一些驗(yàn)證標(biāo)識(shí)，當(dāng)緩存的資源過(guò)期之后，瀏覽器就會(huì)攜帶驗(yàn)證標(biāo)識(shí)向服務(wù)器發(fā)起請(qǐng)求，服務(wù)器通過(guò)對(duì)比這些標(biāo)識(shí)，就能知道緩存的資源是否發(fā)生了改變。

Header 中的驗(yàn)證標(biāo)識(shí)字段主要有兩組：Etag?和?If-None-Match?、Last-Modified?和?If-Modified-Since?。其中，形如?If-xxx?這樣的請(qǐng)求首部字段，可以稱之為條件請(qǐng)求。比如只在滿足某個(gè)條件的情況下返回或上傳文件，這樣可以節(jié)省帶寬。

?

Last-Modified 就是一個(gè)驗(yàn)證器。服務(wù)器在將資源返回給客戶端的同時(shí)，會(huì)將資源的最后修改時(shí)間?Last-Modified?加在 Response Header 中一起返回。瀏覽器會(huì)為資源標(biāo)記上該信息，當(dāng)緩存過(guò)期之后，瀏覽器會(huì)把該信息設(shè)置到?Request Header?中的 If-Modified-Since?中向服務(wù)器發(fā)起請(qǐng)求。

如果?If-Modified-Since 中的值和服務(wù)器上該資源最終的修改時(shí)間一致，就說(shuō)明該資源沒(méi)有被修改過(guò)，服務(wù)器會(huì)直接返回 304 狀態(tài)碼，無(wú)響應(yīng)實(shí)體，這樣就可以節(jié)省傳輸?shù)臄?shù)據(jù)量。如果不一致，服務(wù)器會(huì)返回 200 狀態(tài)碼，同時(shí)和第一次 HTTP 請(qǐng)求一樣，返回響應(yīng)實(shí)體和驗(yàn)證器。

Last-Modified:Fri, 04 Jan 2019 14:00:21 GMT

服務(wù)器會(huì)通過(guò)某種算法，為資源計(jì)算出一個(gè)唯一標(biāo)識(shí)符，在把響應(yīng)返回給客戶端的時(shí)候，會(huì)在 Response Header 中加上 Etag: 唯一標(biāo)識(shí)符?一起返回給客戶端。

Etag:"952d03d8561454120b550f0a5679a172c4822ce8"

客戶端會(huì)將 Etag 保存下來(lái)，后續(xù)請(qǐng)求時(shí)會(huì)將 Etag 作為 Request Header 中?If-None-Match?的值發(fā)給服務(wù)器。通過(guò)比對(duì)客戶端發(fā)過(guò)來(lái)的 Etag 和服務(wù)器上保存的 Etag 是否一致，就能夠知道資源是否發(fā)生了變化。如果資源沒(méi)有發(fā)生變化，返回 304，客戶端繼續(xù)使用緩存。如果資源已經(jīng)修改，則返回 200。

緩存真的可以說(shuō)讓我們又愛(ài)又恨。在開(kāi)發(fā)時(shí)，我們經(jīng)常遇到這樣的問(wèn)題：明明已經(jīng)修改了這個(gè)文件，為什么沒(méi)有生效？好吧，文件被緩存了。。。但是在上線時(shí)，我們又希望文件盡可能地被瀏覽器緩存，來(lái)提高性能。因此為自己的應(yīng)用制定合適的緩存策略非常重要。

為靜態(tài)資源設(shè)置較長(zhǎng)緩存時(shí)間。

有些資源很長(zhǎng)時(shí)間都不會(huì)改變，比如一些三方庫(kù)，圖片，字體文件等。可以為它們?cè)O(shè)置一個(gè)很長(zhǎng)的過(guò)期時(shí)間，例如設(shè)定「一年」。

通過(guò)給文件名的唯一標(biāo)識(shí)來(lái)確保文件修改生效。

有些時(shí)候?yàn)榱私鉀Q bug，我們可能會(huì)修改一些文件，比如應(yīng)用的 CSS、JS 等。如果這些文件已經(jīng)被緩存，那么除非用戶強(qiáng)制刷新頁(yè)面，否則用戶只有在緩存過(guò)期之后才有可能獲取新的文件。如何讓瀏覽器不使用緩存，而是重新下載新的文件呢？有一個(gè)辦法就是給文件名加上唯一標(biāo)識(shí)，比如?Hash 或版本信息。當(dāng)文件修改之后，這個(gè)唯一標(biāo)識(shí)也會(huì)隨之改變。瀏覽器發(fā)現(xiàn)文件改變之后，就不會(huì)使用緩存了。

明確是否有資源不能被緩存。

比如一些敏感數(shù)據(jù)，如果不應(yīng)該被瀏覽器緩存，需要在 Response Header 中設(shè)置 Cache-Control: no-store。

如何知道請(qǐng)求的資源是否被緩存了？打開(kāi) Chrome 的開(kāi)發(fā)者工具，我們可以看到 Size 這一欄下面，如果顯示文件真實(shí)的大小，則說(shuō)明該文件未被緩存。如果顯示 from xxx cache，則說(shuō)明該請(qǐng)求使用的是已被緩存的文件。如下：

調(diào)試時(shí)，如果想禁用瀏覽器緩存，可以在開(kāi)發(fā)者工具上勾選 Disabel cache。

最后，大家可以通過(guò)下面這張圖再回顧一下我們剛剛講過(guò)的內(nèi)容。

HTTP 緩存

奇怪的緩存策略