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

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

• 緩存可以減少用戶等待時間，提升用戶體驗，直接從內(nèi)存或磁盤中取緩存數(shù)據(jù)肯定是比從服務(wù)器請求更快的；

• 減少網(wǎng)絡(luò)帶寬消耗：對于網(wǎng)站運營者和用戶，帶寬都代表著成本，過多的帶寬消耗，都需要支付額外的費用。試想一下如果可以使用緩存，只會產(chǎn)生極小的網(wǎng)絡(luò)流量，這將有效的降低運營成本。

• 降低服務(wù)器壓力：給網(wǎng)絡(luò)資源設(shè)定有效期之后，用戶可以重復(fù)使用本地的緩存，減少對源服務(wù)器的請求，降低服務(wù)器的壓力。

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

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

2. 查看?memory cache；

3. 查看?disk cache；這里又細分：

• 如果有強制緩存且未失效，則使用強制緩存，不請求服務(wù)器。這時的狀態(tài)碼全部是 200；

• 如果有強制緩存但已失效，使用協(xié)商緩存，比較后確定 304 還是 200；

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

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

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

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

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

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

Service Worker
是一個注冊在指定源和路徑下的事件驅(qū)動?worker；特點是：

• 運行在?worker?上下文，因此它不能訪問?DOM；

• 獨立于主線程之外，不會造成阻塞；

• 設(shè)計完全異步，所以同步?API（如?XHR?和?localStorage?）不能在?Service Worker?中使用；

• 最后處于安全考慮，必須在?HTTPS?環(huán)境下才可以使用；

說了這么多特點，那它和緩存有啥關(guān)系？其實它有一個功能就是離線緩存：Service Worker Cache；區(qū)別于瀏覽器內(nèi)部的?memory cache?和?disk cache，它允許我們自己；通過?Service Worker?設(shè)置的緩存會出現(xiàn)在瀏覽器開發(fā)者工具?Application?面板下的?Cache Storage?中。
memory cache
是瀏覽器內(nèi)存中的緩存，相比于?disk cache?它的特點是讀取速度快，但容量小，且時效性短，一旦瀏覽器?tab?頁關(guān)閉，memory cache?就將被清空。memory cache?會自動緩存所有資源嘛？答案肯定是否定的，當(dāng)?HTTP?頭設(shè)置了?Cache-Control: no-store?的時候或者瀏覽器設(shè)置了?Disabled cache?就無法把資源存入內(nèi)存了，其實也無法存入硬盤。當(dāng)從?memory cache?中查找緩存的時候，不僅僅會去匹配資源的?URL，還會看其?Content-type?是否相同。
disk cache
也叫?HTTP cache?是存在硬盤中的緩存，根據(jù)?HTTP?頭部的各類字段進行判定資源的緩存規(guī)則，比如是否可以緩存，什么時候過期，過期之后需要重新發(fā)起請求嗎？相比于?memory cache?的?disk cache?擁有存儲空間時間長等優(yōu)點，網(wǎng)站中的絕大多數(shù)資源都是存在?disk cache?中的。
瀏覽器如何判斷一個資源是存入內(nèi)存還是硬盤呢？關(guān)于這個問題，網(wǎng)上說法不一，不過比較靠譜的觀點是：對于大文件大概率會存入硬盤中；當(dāng)前系統(tǒng)內(nèi)存使用率高的話，文件優(yōu)先存入硬盤。

緩存按照緩存位置劃分，其實還有一個?HTTP/2?的內(nèi)容?push cache，由于目前國內(nèi)對?HTTP/2?應(yīng)用還不廣泛，且網(wǎng)上對?push cache?的知識還不齊全，所以本篇不打算介紹這塊，
緩存策略

根據(jù)?HTTP header?的字段又可以將緩存分成強緩存和協(xié)商緩存。強緩存可以直接從緩存中讀取資源返回給瀏覽器而不需要向服務(wù)器發(fā)送請求，而協(xié)商緩存是當(dāng)強緩存失效后（過了過期時間），瀏覽器需要攜帶緩存標(biāo)識向服務(wù)器發(fā)送請求，服務(wù)器根據(jù)緩存標(biāo)識決定是否使用緩存的過程。強緩存的字段有：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 復(fù)制代碼
Cache-Control
它是?HTTP/1.1?的字段，其中的包含的值很多：

• max-age?最大緩存時間，值的單位是秒，在該時間內(nèi)，瀏覽器不需要向瀏覽器請求。這個設(shè)置解決了?Expires?中由于客戶端系統(tǒng)時間不準(zhǔn)確而導(dǎo)致緩存失效的問題；

• must-revalidate：如果超過了?max-age?的時間，瀏覽器必須向服務(wù)器發(fā)送請求，驗證資源是否還有效；

• public?響應(yīng)可以被任何對象（客戶端、代理服務(wù)器等）緩存；

• private?響應(yīng)只能被客戶端緩存；

• no-cache?跳過強緩存，直接進入?yún)f(xié)商緩存階段；

• no-store?不緩存任何內(nèi)容，設(shè)置了這個后資源也不會被緩存到內(nèi)存和硬盤；

Cache-Control?的值是可以混合使用的，比如：
Cache-Control: private, max-age=0, no-cache 復(fù)制代碼
當(dāng)混合使用的時候它們的優(yōu)先級如下圖所示：

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

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

Last-Modified

資源的最后修改時間；第一次請求的時候，響應(yīng)頭會返回該字段告知瀏覽器資源的最后一次修改時間；瀏覽器會將值和資源存在緩存中；再次請求該資源的時候，如果強緩存過期，則瀏覽器會設(shè)置請求頭的?If-Modifined-Since?字段值為存儲在緩存中的上次響應(yīng)頭?Last-Modified?的值，并且發(fā)送請求；服務(wù)器拿著?If-Modifined-Since?的值和?Last-Modified?進行對比。如果相等，表示資源未修改，響應(yīng) 304；如果不相等，表示資源被修改，響應(yīng) 200，且返回請求資源。如果資源更新的速度是小于 1 秒的，那么該字段將失效，因為?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)：因為?TAB?頁并沒有關(guān)閉，因此?memory cache?是可用的，會被優(yōu)先使用(如果匹配的話)，其次才是?disk cache。

• 強制刷新 (? + ? + 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è)置得長一點，

頻繁變化的資源

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

不進行緩存

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

1. HTTP?信息頭中包含?Cache-Control: no-cache?，pragma: no-cache（HTTP1.0），或?Cache-Control: max-age=0?等告訴瀏覽器不用緩存的請求；

2. 需要根據(jù)?Cookie、認證信息等決定輸入內(nèi)容的動態(tài)請求是不能被緩存的；

3. 經(jīng)過?HTTPS?安全加密的請求；

4. POST?請求無法被緩存；

5. HTTP?響應(yīng)頭中不包含?Last-Modified/Etag，也不包含?Cache-Control/Expires?的請求無法被緩存；

文章來自網(wǎng)絡(luò)侵刪
作者：大海我來了
鏈接：https://juejin.cn/post/6911482888491892749
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

看完這篇文章是不是意猶未盡，感興趣的小胡囖板門也可以讓自己的知識拓展一下，

【尚學(xué)堂】web前端HTML教程、web前端CSS教程