知識分享！我希望你知道這些瀏覽器緩存知識
瀏覽器緩存一直是個老生常談的話題，也是面試官常常用來鑒別面試者的利器，作為前端來講這塊知識是屬于必須掌握的，再者利用好緩存也是做性能優(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）進(jìn)行請求的時候會發(fā)生什么？請從緩存的角度大概說下：
緩存位置
從瀏覽器開發(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，它允許我們自己去操控緩存，具體操作過程可以參看 Using_Service_Workers；通過 Service Worker 設(shè)置的緩存會出現(xiàn)在瀏覽器開發(fā)者工具 Application 面板下的 Cache Storage 中。
緩存按照緩存位置劃分，其實還有一個?HTTP/2?的內(nèi)容?push cache，由于目前國內(nèi)對?HTTP/2?應(yīng)用還不廣泛，且網(wǎng)上對?push cache?的知識還不齊全，所以本篇不打算介紹這塊
緩存策略
根據(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)，瀏覽器不需要向瀏覽器請求。這個設(shè)置解決了Expires中由于客戶端系統(tǒng)時間不準(zhǔn)確而導(dǎo)致緩存失效的問題；must-revalidate：如果超過了max-age的時間，瀏覽器必須向服務(wù)器發(fā)送請求，驗證資源是否還有效；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īng)狀態(tài)會是 304，且不會返回請求資源，而是直接從瀏覽器緩存中讀取。
而瀏覽器緩存標(biāo)識可以是：Last-Modified 和 ETag：
緩存應(yīng)用
靜態(tài)資源
比如頁面引入了一個?JQuery，對于頁面來說這個腳本就是一個工具庫，基本上是不會發(fā)生變化的，對于這種資源可以將它的緩存時間設(shè)置得長一點，比如如下這個地址的腳本：
頻繁變化的資源
對于頻繁變化的資源，比如某個頁面經(jīng)常需要調(diào)整，那么這個頁面就需要在每次請求的時候都進(jìn)行驗證，可以在響應(yīng)頭這樣設(shè)置：
cache-control: no-cache
不進(jìn)行緩存
當(dāng)然并不是所有請求都能被緩存，無法被瀏覽器緩存的請求如下：
HTTP信息頭中包含Cache-Control: no-cache，pragma: no-cache（HTTP1.0），或Cache-Control: max-age=0等告訴瀏覽器不用緩存的請求；需要根據(jù)
Cookie、認(rèn)證信息等決定輸入內(nèi)容的動態(tài)請求是不能被緩存的；經(jīng)過
HTTPS安全加密的請求；POST請求無法被緩存；HTTP響應(yīng)頭中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的請求無法被緩存；
了解更多，請點擊：https://www.bilibili.com/video/BV15z4y1y7e7/
作者：大海我來了
鏈接：https://juejin.cn/post/6911482888491892749
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
