[[360824]]

 瀏覽器緩存一直是個老生常談的話題，也是面試官常常用來鑒別面試者的利器，作為前端來講這塊知識是屬于必須掌握的，再者利用好緩存也是做性能優(yōu)化的有效方法。本文將從緩存原因、緩存讀寫順序，緩存位置以及緩存策略這幾個角度介紹瀏覽器緩存，并且最后給出實(shí)踐的應(yīng)用舉例。

為什么要緩存

很多同學(xué)知道緩存的位置和字段，知道怎么用，但是你有沒有想過為什么我們的頁面需要瀏覽器緩存呢?

• 緩存可以減少用戶等待時間，提升用戶體驗(yàn)，直接從內(nèi)存或磁盤中取緩存數(shù)據(jù)肯定是比從服務(wù)器請求更快的;
• 減少網(wǎng)絡(luò)帶寬消耗：對于網(wǎng)站運(yùn)營者和用戶，帶寬都代表著成本，過多的帶寬消耗，都需要支付額外的費(fèi)用。試想一下如果可以使用緩存，只會產(chǎn)生極小的網(wǎng)絡(luò)流量，這將有效的降低運(yùn)營成本。
• 降低服務(wù)器壓力：給網(wǎng)絡(luò)資源設(shè)定有效期之后，用戶可以重復(fù)使用本地的緩存，減少對源服務(wù)器的請求，降低服務(wù)器的壓力。

緩存讀寫順序

當(dāng)瀏覽器對一個資源(比如一個外鏈的 a.js)進(jìn)行請求的時候會發(fā)生什么?請從緩存的角度大概說下：

1.調(diào)用 Service Worker 的 fetch 事件獲取資源;

2.查看 memory cache;

3.查看 disk cache;這里又細(xì)分：

• 如果有強(qiáng)制緩存且未失效，則使用強(qiáng)制緩存，不請求服務(wù)器。這時的狀態(tài)碼全部是 200;
• 如果有強(qiáng)制緩存但已失效，使用協(xié)商緩存，比較后確定 304 還是 200;

4.發(fā)送網(wǎng)絡(luò)請求，等待網(wǎng)絡(luò)響應(yīng);

5.把響應(yīng)內(nèi)容存入 disk cache (如果請求頭信息配置可以存的話);

6.把響應(yīng)內(nèi)容的引用存入 memory cache (無視請求頭信息的配置，除了 no-store 之外);

7.把響應(yīng)內(nèi)容存入 Service Worker 的 Cache Storage (如果 Service Worker 的腳本調(diào)用了 cache.put());

上面這一系列過程其實(shí)是瀏覽器查找緩存和把資源存入緩存的執(zhí)行流程。這其中出現(xiàn)了很多專業(yè)詞匯，讓人看了一臉懵逼，下面將從緩存位置和緩存策略兩個角度簡要介紹瀏覽器的緩存。

緩存位置

從瀏覽器開發(fā)者工具的 Network 面板下某個請求的 Size 中可以看到當(dāng)前請求資源的大小以及來源，從這些來源我們就知道該資源到底是從 memory cache中讀取的呢，還是從 disk cache 中讀取的，亦或者是服務(wù)器返回的。而這些就是緩存位置：

Service Worker

是一個注冊在指定源和路徑下的事件驅(qū)動 worker;特點(diǎn)是：

• 運(yùn)行在 worker 上下文，因此它不能訪問 DOM;
• 獨(dú)立于主線程之外，不會造成阻塞;
• 設(shè)計(jì)完全異步，所以同步 API(如 XHR 和 localStorage )不能在 Service Worker 中使用;
• 最后處于安全考慮，必須在 HTTPS 環(huán)境下才可以使用;

說了這么多特點(diǎn)，那它和緩存有啥關(guān)系?其實(shí)它有一個功能就是離線緩存：Service Worker Cache;區(qū)別于瀏覽器內(nèi)部的 memory cache 和 disk cache，它允許我們自己去操控緩存，具體操作過程可以參看 Using_Service_Workers;通過 Service Worker 設(shè)置的緩存會出現(xiàn)在瀏覽器開發(fā)者工具 Application 面板下的 Cache Storage 中。

memory cache

是瀏覽器內(nèi)存中的緩存，相比于 disk cache 它的特點(diǎn)是讀取速度快，但容量小，且時效性短，一旦瀏覽器 tab 頁關(guān)閉，memory cache 就將被清空。memory cache 會自動緩存所有資源嘛?答案肯定是否定的，當(dāng) HTTP 頭設(shè)置了 Cache-Control: no-store 的時候或者瀏覽器設(shè)置了 Disabled cache 就無法把資源存入內(nèi)存了，其實(shí)也無法存入硬盤。當(dāng)從 memory cache 中查找緩存的時候，不僅僅會去匹配資源的 URL，還會看其 Content-type 是否相同。

disk cache

也叫 HTTP cache 是存在硬盤中的緩存，根據(jù) HTTP 頭部的各類字段進(jìn)行判定資源的緩存規(guī)則，比如是否可以緩存，什么時候過期，過期之后需要重新發(fā)起請求嗎?相比于 memory cache 的 disk cache 擁有存儲空間時間長等優(yōu)點(diǎn)，網(wǎng)站中的絕大多數(shù)資源都是存在 disk cache 中的。

• 瀏覽器如何判斷一個資源是存入內(nèi)存還是硬盤呢?關(guān)于這個問題，網(wǎng)上說法不一，不過比較靠譜的觀點(diǎn)是：對于大文件大概率會存入硬盤中;當(dāng)前系統(tǒng)內(nèi)存使用率高的話，文件優(yōu)先存入硬盤。

緩存按照緩存位置劃分，其實(shí)還有一個 HTTP/2 的內(nèi)容 push cache，由于目前國內(nèi)對 HTTP/2 應(yīng)用還不廣泛，且網(wǎng)上對 push cache 的知識還不齊全，所以本篇不打算介紹這塊，感興趣的可以閱讀這篇文章：HTTP/2 push is tougher than I thought

緩存策略

根據(jù) HTTP header 的字段又可以將緩存分成強(qiáng)緩存和協(xié)商緩存。強(qiáng)緩存可以直接從緩存中讀取資源返回給瀏覽器而不需要向服務(wù)器發(fā)送請求，而協(xié)商緩存是當(dāng)強(qiáng)緩存失效后(過了過期時間)，瀏覽器需要攜帶緩存標(biāo)識向服務(wù)器發(fā)送請求，服務(wù)器根據(jù)緩存標(biāo)識決定是否使用緩存的過程。強(qiáng)緩存的字段有：Expires 和 Cache-Control。協(xié)商緩存的字段有：Last-Modified 和 ETag。

Expires

Expires 是 HTTP/1.0 的字段，表示緩存過期時間，它是一個 GMT 格式的時間字符串。Expires 需要在服務(wù)端配置(具體配置也根據(jù)服務(wù)器而定)，瀏覽器會根據(jù)該過期日期與客戶端時間對比，如果過期時間還沒到，則會去緩存中讀取該資源，如果已經(jīng)到期了，則瀏覽器判斷為該資源已經(jīng)不新鮮要重新從服務(wù)端獲取。由于 Expires 是一個絕對的時間，所以會局限于客戶端時間的準(zhǔn)確性，從而可能會出現(xiàn)瀏覽器判斷緩存失效的問題。如下是一個 Expires 示例，是一個日期/時間：

Expires: Wed, 21 Oct 2020 07:28:00 GMT 

Cache-Control

它是 HTTP/1.1 的字段，其中的包含的值很多：

• max-age 最大緩存時間，值的單位是秒，在該時間內(nèi)，瀏覽器不需要向?yàn)g覽器請求。這個設(shè)置解決了 Expires 中由于客戶端系統(tǒng)時間不準(zhǔn)確而導(dǎo)致緩存失效的問題;
• must-revalidate：如果超過了 max-age 的時間，瀏覽器必須向服務(wù)器發(fā)送請求，驗(yàn)證資源是否還有效;
• public 響應(yīng)可以被任何對象(客戶端、代理服務(wù)器等)緩存;
• private 響應(yīng)只能被客戶端緩存;
• no-cache 跳過強(qiáng)緩存，直接進(jìn)入?yún)f(xié)商緩存階段;
• no-store 不緩存任何內(nèi)容，設(shè)置了這個后資源也不會被緩存到內(nèi)存和硬盤;

Cache-Control 的值是可以混合使用的，比如：

Cache-Control: private, max-age=0, no-cache 

當(dāng)混合使用的時候它們的優(yōu)先級如下圖所示：

「當(dāng) Expires 和 Cache-Control 都被設(shè)置的時候，瀏覽器會優(yōu)先考慮后者」。當(dāng)強(qiáng)緩存失效的時候，則會進(jìn)入到協(xié)商緩存階段。具體細(xì)節(jié)是這樣：瀏覽器從本地查找強(qiáng)緩存，發(fā)現(xiàn)失效了，然后會拿著緩存標(biāo)識請求服務(wù)器，服務(wù)器拿著這個緩存標(biāo)識和對應(yīng)的字段進(jìn)行校驗(yàn)資源是否被修改，如果沒有被修改則此時響應(yīng)狀態(tài)會是 304，且不會返回請求資源，而是直接從瀏覽器緩存中讀取。

而瀏覽器緩存標(biāo)識可以是：Last-Modified 和 ETag：

Last-Modified

資源的最后修改時間;第一次請求的時候，響應(yīng)頭會返回該字段告知瀏覽器資源的最后一次修改時間;瀏覽器會將值和資源存在緩存中;再次請求該資源的時候，如果強(qiáng)緩存過期，則瀏覽器會設(shè)置請求頭的 If-Modifined-Since 字段值為存儲在緩存中的上次響應(yīng)頭 Last-Modified 的值，并且發(fā)送請求;服務(wù)器拿著 If-Modifined-Since 的值和 Last-Modified 進(jìn)行對比。如果相等，表示資源未修改，響應(yīng) 304;如果不相等，表示資源被修改，響應(yīng) 200，且返回請求資源。如果資源更新的速度是小于 1 秒的，那么該字段將失效，因?yàn)?Last-Modified 時間是精確到秒的。所以有了 ETag。

ETag

根據(jù)資源內(nèi)容生成的唯一標(biāo)識，資源是否被修改的判斷過程和上面的一致，只是對應(yīng)的字段替換了。Last-Modified 替換成 ETag，If-Modifined-Since替換成 If-None-Match。

當(dāng) Last-Modified 和 ETag 都被設(shè)置的時候，瀏覽器會優(yōu)先考慮后者。

瀏覽器的行為

• 瀏覽器地址欄輸入 URL 后回車：查找 disk cache 中是否有匹配。如有則使用;如沒有則發(fā)送網(wǎng)絡(luò)請求。
• 普通刷新 (⌘ + R)：因?yàn)?TAB 頁并沒有關(guān)閉，因此 memory cache 是可用的，會被優(yōu)先使用(如果匹配的話)，其次才是 disk cache。
• 強(qiáng)制刷新 (⇧ + ⌘ + R)：瀏覽器不使用緩存，因此發(fā)送的請求頭部均帶有 Cache-control: no-cache(為了兼容，還帶了 Pragma: no-cache)。服務(wù)器直接返回 200 和最新內(nèi)容。
• 當(dāng)在開發(fā)者工具 Network 面板下設(shè)置了 Disabled cache 禁用緩存后，瀏覽器將不會從 memory cache 或者 disk cache 中讀取緩存，而是直接發(fā)起網(wǎng)絡(luò)請求。

緩存應(yīng)用

靜態(tài)資源

比如頁面引入了一個 JQuery，對于頁面來說這個腳本就是一個工具庫，基本上是不會發(fā)生變化的，對于這種資源可以將它的緩存時間設(shè)置得長一點(diǎn)，比如如下這個地址的腳本：

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> 

 你會看到它的響應(yīng)頭里設(shè)置了，max-age=2592000 直接緩存 30 天：

cache-control: public, max-age=2592000 

頻繁變化的資源

對于頻繁變化的資源，比如某個頁面經(jīng)常需要調(diào)整，那么這個頁面就需要在每次請求的時候都進(jìn)行驗(yàn)證，可以在響應(yīng)頭這樣設(shè)置：

cache-control: no-cache 

不進(jìn)行緩存

當(dāng)然并不是所有請求都能被緩存，無法被瀏覽器緩存的請求如下：

1. HTTP 信息頭中包含 Cache-Control: no-cache ，pragma: no-cache(HTTP1.0)，或 Cache-Control: max-age=0 等告訴瀏覽器不用緩存的請求;
2. 需要根據(jù) Cookie、認(rèn)證信息等決定輸入內(nèi)容的動態(tài)請求是不能被緩存的;
3. 經(jīng)過 HTTPS 安全加密的請求;
4. POST 請求無法被緩存;
5. HTTP 響應(yīng)頭中不包含 Last-Modified/Etag，也不包含 Cache-Control/Expires 的請求無法被緩存;