寫(xiě)在前面
此系列來(lái)源于開(kāi)源項(xiàng)目：前端 100 問(wèn)：能搞懂 80%的請(qǐng)把簡(jiǎn)歷給我
為了備戰(zhàn) 2021 春招
每天一題植捎，督促自己
從多方面多角度總結(jié)答案衙解，豐富知識(shí)
請(qǐng)求時(shí)瀏覽器緩存 from memory cache 和 from disk cache 的依據(jù)是什么，哪些數(shù)據(jù)什么時(shí)候存放在 Memory Cache 和 Disk Cache 中焰枢？
簡(jiǎn)書(shū)整合地址：前端 100 問(wèn)
正文回答
深度好文：深入理解瀏覽器的緩存機(jī)制
緩存可以說(shuō)是性能優(yōu)化中簡(jiǎn)單高效的一種優(yōu)化方式了蚓峦。一個(gè)優(yōu)秀的緩存策略可以縮短網(wǎng)頁(yè)請(qǐng)求資源的距離，減少延遲济锄，并且由于緩存文件可以重復(fù)利用暑椰，還可以減少帶寬，降低網(wǎng)絡(luò)負(fù)荷拟淮。
緩存位置
從緩存位置上來(lái)說(shuō)分為四種干茉，并且各自有優(yōu)先級(jí)，當(dāng)依次查找緩存且都沒(méi)有命中的時(shí)候很泊，才會(huì)去請(qǐng)求網(wǎng)絡(luò)角虫。
- Service Worker
- Memory Cache
- Disk Cache
- Push Cache
1.Service Worker
Service Worker 是運(yùn)行在瀏覽器背后的獨(dú)立線程，一般可以用來(lái)實(shí)現(xiàn)緩存功能委造。使用 Service Worker 的話戳鹅，傳輸協(xié)議必須為 HTTPS。因?yàn)?Service Worker 中涉及到請(qǐng)求攔截昏兆，所以必須使用 HTTPS 協(xié)議來(lái)保障安全枫虏。Service Worker 的緩存與瀏覽器其他內(nèi)建的緩存機(jī)制不同，它可以讓我們自由控制緩存哪些文件爬虱、如何匹配緩存隶债、如何讀取緩存，并且緩存是持續(xù)性的跑筝。
Service Worker 實(shí)現(xiàn)緩存功能一般分為三個(gè)步驟：
- 首先需要先注冊(cè) Service Worker死讹，
- 然后監(jiān)聽(tīng)到 install 事件以后就可以緩存需要的文件，
- 那么在下次用戶訪問(wèn)的時(shí)候就可以通過(guò)攔截請(qǐng)求的方式查詢(xún)是否存在緩存曲梗，存在緩存的話就可以直接讀取緩存文件赞警，否則就去請(qǐng)求數(shù)據(jù)。
當(dāng) Service Worker 沒(méi)有命中緩存的時(shí)候虏两，我們需要去調(diào)用 fetch 函數(shù)獲取數(shù)據(jù)愧旦。也就是說(shuō)，如果我們沒(méi)有在 Service Worker 命中緩存的話定罢，會(huì)根據(jù)緩存查找優(yōu)先級(jí)去查找數(shù)據(jù)笤虫。但是不管我們是從 Memory Cache 中還是從網(wǎng)絡(luò)請(qǐng)求中獲取的數(shù)據(jù)，瀏覽器都會(huì)顯示我們是從 Service Worker 中獲取的內(nèi)容。
2.Memory Cache
Memory Cache 也就是內(nèi)存中的緩存耕皮，主要包含的是當(dāng)前頁(yè)面中已經(jīng)抓取到的資源,例如頁(yè)面上已經(jīng)下載的樣式境蜕、腳本、圖片等凌停。讀取內(nèi)存中的數(shù)據(jù)肯定比磁盤(pán)快,內(nèi)存緩存雖然讀取高效粱年，可是緩存持續(xù)性很短，會(huì)隨著進(jìn)程的釋放而釋放罚拟。 一旦我們關(guān)閉 Tab 頁(yè)面台诗，內(nèi)存中的緩存也就被釋放了。
那么既然內(nèi)存緩存這么高效赐俗，我們是不是能讓數(shù)據(jù)都存放在內(nèi)存中呢拉队？
這是不可能的。計(jì)算機(jī)中的內(nèi)存一定比硬盤(pán)容量小得多阻逮，操作系統(tǒng)需要精打細(xì)算內(nèi)存的使用粱快，所以能讓我們使用的內(nèi)存必然不多。
內(nèi)存緩存中有一塊重要的緩存資源是 preloader 相關(guān)指令（例如<link rel="prefetch">）下載的資源叔扼∈驴蓿總所周知 preloader 的相關(guān)指令已經(jīng)是頁(yè)面優(yōu)化的常見(jiàn)手段之一，它可以一邊解析 js/css 文件瓜富，一邊網(wǎng)絡(luò)請(qǐng)求下一個(gè)資源鳍咱。
需要注意的事情是，內(nèi)存緩存在緩存資源時(shí)并不關(guān)心返回資源的 HTTP 緩存頭 Cache-Control 是什么值与柑，同時(shí)資源的匹配也并非僅僅是對(duì) URL 做匹配谤辜，還可能會(huì)對(duì) Content-Type，CORS 等其他特征做校驗(yàn)价捧。
3.Disk Cache
Disk Cache 也就是存儲(chǔ)在硬盤(pán)中的緩存丑念，讀取速度慢點(diǎn)，但是什么都能存儲(chǔ)到磁盤(pán)中结蟋，比之 Memory Cache 勝在容量和存儲(chǔ)時(shí)效性上脯倚。
在所有瀏覽器緩存中，Disk Cache 覆蓋面基本是最大的椎眯。它會(huì)根據(jù) HTTP Herder 中的字段判斷哪些資源需要緩存挠将，哪些資源可以不請(qǐng)求直接使用胳岂，哪些資源已經(jīng)過(guò)期需要重新請(qǐng)求编整。并且即使在跨站點(diǎn)的情況下，相同地址的資源一旦被硬盤(pán)緩存下來(lái)乳丰，就不會(huì)再次去請(qǐng)求數(shù)據(jù)掌测。絕大部分的緩存都來(lái)自 Disk Cache
瀏覽器會(huì)把哪些文件丟進(jìn)內(nèi)存中？哪些丟進(jìn)硬盤(pán)中？
- 對(duì)于大文件來(lái)說(shuō)汞斧，大概率是不存儲(chǔ)在內(nèi)存中的夜郁，反之優(yōu)先
- 當(dāng)前系統(tǒng)內(nèi)存使用率高的話，文件優(yōu)先存儲(chǔ)進(jìn)硬盤(pán)
4.Push Cache
Push Cache（推送緩存）是 HTTP/2 中的內(nèi)容粘勒，當(dāng)以上三種緩存都沒(méi)有命中時(shí)竞端，它才會(huì)被使用。它只在會(huì)話（Session）中存在庙睡，一旦會(huì)話結(jié)束就被釋放事富，并且緩存時(shí)間也很短暫，在 Chrome 瀏覽器中只有 5 分鐘左右乘陪，同時(shí)它也并非嚴(yán)格執(zhí)行 HTTP 頭中的緩存指令统台。
Push Cache 在國(guó)內(nèi)能夠查到的資料很少，也是因?yàn)?HTTP/2 在國(guó)內(nèi)不夠普及啡邑。但是有一些結(jié)論可以看看：
- 所有的資源都能被推送贱勃，并且能夠被緩存,但是 Edge 和 Safari 瀏覽器支持相對(duì)比較差
- 可以推送 no-cache 和 no-store 的資源
- 一旦連接被關(guān)閉，Push Cache 就被釋放
- 多個(gè)頁(yè)面可以使用同一個(gè) HTTP/2 的連接谤逼，也就可以使用同一個(gè) Push Cache贵扰。這主要還是依賴(lài)瀏覽器的實(shí)現(xiàn)而定，出于對(duì)性能的考慮森缠，有的瀏覽器會(huì)對(duì)相同域名但不同的 tab 標(biāo)簽使用同一個(gè) HTTP 連接拔鹰。
- Push Cache 中的緩存只能被使用一次
- 瀏覽器可以拒絕接受已經(jīng)存在的資源推送
- 你可以給其他域名推送資源
如果以上四種緩存都沒(méi)有命中的話，那么只能發(fā)起請(qǐng)求來(lái)獲取資源了贵涵。
那么為了性能上的考慮列肢，大部分的接口都應(yīng)該選擇好緩存策略，通常瀏覽器緩存策略分為兩種：強(qiáng)緩存和協(xié)商緩存宾茂，并且緩存策略都是通過(guò)設(shè)置 HTTP Header 來(lái)實(shí)現(xiàn)的瓷马。
緩存過(guò)程分析
瀏覽器與服務(wù)器通信的方式為應(yīng)答模式，即是：瀏覽器發(fā)起 HTTP 請(qǐng)求 – 服務(wù)器響應(yīng)該請(qǐng)求跨晴，那么瀏覽器怎么確定一個(gè)資源該不該緩存欧聘，如何去緩存呢？瀏覽器第一次向服務(wù)器發(fā)起該請(qǐng)求后拿到請(qǐng)求結(jié)果后端盆，將請(qǐng)求結(jié)果和緩存標(biāo)識(shí)存入瀏覽器緩存怀骤，瀏覽器對(duì)于緩存的處理是根據(jù)第一次請(qǐng)求資源時(shí)返回的響應(yīng)頭來(lái)確定的。
由上圖我們可以知道：
- 瀏覽器每次發(fā)起請(qǐng)求焕妙，都會(huì)先在瀏覽器緩存中查找該請(qǐng)求的結(jié)果以及緩存標(biāo)識(shí)
- 瀏覽器每次拿到返回的請(qǐng)求結(jié)果都會(huì)將該結(jié)果和緩存標(biāo)識(shí)存入瀏覽器緩存中
以上兩點(diǎn)結(jié)論就是瀏覽器緩存機(jī)制的關(guān)鍵蒋伦，它確保了每個(gè)請(qǐng)求的緩存存入與讀取，只要我們?cè)倮斫鉃g覽器緩存的使用規(guī)則焚鹊，那么所有的問(wèn)題就迎刃而解了
強(qiáng)緩存
強(qiáng)緩存：不會(huì)向服務(wù)器發(fā)送請(qǐng)求痕届，直接從緩存中讀取資源，在 chrome 控制臺(tái)的 Network 選項(xiàng)中可以看到該請(qǐng)求返回 200 的狀態(tài)碼，并且 Size 顯示 from disk cache 或 from memory cache研叫。強(qiáng)緩存可以通過(guò)設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Expires 和 Cache-Control锤窑。
1.Expires
緩存過(guò)期時(shí)間，用來(lái)指定資源到期的時(shí)間嚷炉，是服務(wù)器端的具體的時(shí)間點(diǎn)渊啰。也就是說(shuō)，Expires=max-age + 請(qǐng)求時(shí)間申屹，需要和 Last-modified 結(jié)合使用虽抄。Expires 是 Web 服務(wù)器響應(yīng)消息頭字段，在響應(yīng) http 請(qǐng)求時(shí)告訴瀏覽器在過(guò)期時(shí)間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)独柑，而無(wú)需再次請(qǐng)求迈窟。
Expires 是 HTTP/1 的產(chǎn)物，受限于本地時(shí)間忌栅，如果修改了本地時(shí)間车酣，可能會(huì)造成緩存失效。Expires: Wed, 22 Oct 2018 08:41:00 GMT 表示資源會(huì)在 Wed, 22 Oct 2018 08:41:00 GMT 后過(guò)期索绪，需要再次請(qǐng)求湖员。
2.Cache-Control
在 HTTP/1.1 中，Cache-Control 是最重要的規(guī)則瑞驱，主要用于控制網(wǎng)頁(yè)緩存娘摔。比如當(dāng) Cache-Control:max-age=300 時(shí)，則代表在這個(gè)請(qǐng)求正確返回時(shí)間（瀏覽器也會(huì)記錄下來(lái)）的 5 分鐘內(nèi)再次加載資源唤反，就會(huì)命中強(qiáng)緩存凳寺。
Cache-Control 可以在請(qǐng)求頭或者響應(yīng)頭中設(shè)置，并且可以組合使用多種指令：
public：所有內(nèi)容都將被緩存（客戶端和代理服務(wù)器都可緩存）彤侍。具體來(lái)說(shuō)響應(yīng)可被任何中間節(jié)點(diǎn)緩存肠缨，如 Browser <-- proxy1 <-- proxy2 <-- Server，中間的 proxy 可以緩存資源盏阶，比如下次再請(qǐng)求同一資源 proxy1 直接把自己緩存的東西給 Browser 而不再向 proxy2 要晒奕。
private：所有內(nèi)容只有客戶端可以緩存，Cache-Control 的默認(rèn)取值名斟。具體來(lái)說(shuō)脑慧，表示中間節(jié)點(diǎn)不允許緩存，對(duì)于 Browser <-- proxy1 <-- proxy2 <-- Server砰盐，proxy 會(huì)老老實(shí)實(shí)把 Server 返回的數(shù)據(jù)發(fā)送給 proxy1,自己不緩存任何數(shù)據(jù)闷袒。當(dāng)下次 Browser 再次請(qǐng)求時(shí) proxy 會(huì)做好請(qǐng)求轉(zhuǎn)發(fā)而不是自作主張給自己緩存的數(shù)據(jù)。
no-cache：客戶端緩存內(nèi)容楞卡，是否使用緩存則需要經(jīng)過(guò)協(xié)商緩存來(lái)驗(yàn)證決定霜运。表示不使用 Cache-Control 的緩存控制方式做前置驗(yàn)證，而是使用 Etag 或者 Last-Modified 字段來(lái)控制緩存蒋腮。需要注意的是淘捡，no-cache 這個(gè)名字有一點(diǎn)誤導(dǎo)。設(shè)置了 no-cache 之后池摧，并不是說(shuō)瀏覽器就不再緩存數(shù)據(jù)焦除，只是瀏覽器在使用緩存數(shù)據(jù)時(shí)，需要先確認(rèn)一下數(shù)據(jù)是否還跟服務(wù)器保持一致作彤。
no-store：所有內(nèi)容都不會(huì)被緩存膘魄，即不使用強(qiáng)制緩存，也不使用協(xié)商緩存
max-age：max-age=xxx (xxx is numeric)表示緩存內(nèi)容將在 xxx 秒后失效
s-maxage（單位為 s)：同 max-age 作用一樣竭讳，只在代理服務(wù)器中生效（比如 CDN 緩存）创葡。比如當(dāng) s-maxage=60 時(shí)，在這 60 秒中绢慢，即使更新了 CDN 的內(nèi)容灿渴，瀏覽器也不會(huì)進(jìn)行請(qǐng)求。max-age 用于普通緩存胰舆，而 s-maxage 用于代理緩存骚露。s-maxage 的優(yōu)先級(jí)高于 max-age。如果存在 s-maxage缚窿，則會(huì)覆蓋掉 max-age 和 Expires header棘幸。
max-stale：能容忍的最大過(guò)期時(shí)間。max-stale 指令標(biāo)示了客戶端愿意接收一個(gè)已經(jīng)過(guò)期了的響應(yīng)倦零。如果指定了 max-stale 的值误续，則最大容忍時(shí)間為對(duì)應(yīng)的秒數(shù)。如果沒(méi)有指定扫茅，那么說(shuō)明瀏覽器愿意接收任何 age 的響應(yīng)（age 表示響應(yīng)由源站生成或確認(rèn)的時(shí)間與當(dāng)前時(shí)間的差值）女嘲。
min-fresh：能夠容忍的最小新鮮度。min-fresh 標(biāo)示了客戶端不愿意接受新鮮度不多于當(dāng)前的 age 加上 min-fresh 設(shè)定的時(shí)間之和的響應(yīng)诞帐。
3.Expires 和 Cache-Control 兩者對(duì)比
其實(shí)這兩者差別不大欣尼，區(qū)別就在于 Expires 是 http1.0 的產(chǎn)物，Cache-Control 是 http1.1 的產(chǎn)物停蕉，兩者同時(shí)存在的話愕鼓，Cache-Control 優(yōu)先級(jí)高于 Expires；在某些不支持 HTTP1.1 的環(huán)境下慧起，Expires 就會(huì)發(fā)揮用處菇晃。所以 Expires 其實(shí)是過(guò)時(shí)的產(chǎn)物，現(xiàn)階段它的存在只是一種兼容性的寫(xiě)法蚓挤。
強(qiáng)緩存判斷是否緩存的依據(jù)來(lái)自于是否超出某個(gè)時(shí)間或者某個(gè)時(shí)間段磺送，而不關(guān)心服務(wù)器端文件是否已經(jīng)更新驻子，這可能會(huì)導(dǎo)致加載文件不是服務(wù)器端最新的內(nèi)容，那我們?nèi)绾潍@知服務(wù)器端內(nèi)容是否已經(jīng)發(fā)生了更新呢估灿？此時(shí)我們需要用到協(xié)商緩存策略崇呵。
協(xié)商緩存
協(xié)商緩存就是強(qiáng)制緩存失效后，瀏覽器攜帶緩存標(biāo)識(shí)向服務(wù)器發(fā)起請(qǐng)求馅袁，由服務(wù)器根據(jù)緩存標(biāo)識(shí)決定是否使用緩存的過(guò)程域慷，主要有以下兩種情況：
- 協(xié)商緩存生效，返回 304 和 Not Modified
- 協(xié)商緩存失效汗销，返回 200 和請(qǐng)求結(jié)果
協(xié)商緩存可以通過(guò)設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Last-Modified 和 ETag 犹褒。
緩存機(jī)制
強(qiáng)制緩存優(yōu)先于協(xié)商緩存進(jìn)行，若強(qiáng)制緩存(Expires 和 Cache-Control)生效則直接使用緩存弛针，若不生效則進(jìn)行協(xié)商緩存(Last-Modified / If-Modified-Since 和 Etag / If-None-Match)叠骑，協(xié)商緩存由服務(wù)器決定是否使用緩存，若協(xié)商緩存失效削茁，那么代表該請(qǐng)求的緩存失效座云，返回 200，重新返回資源和緩存標(biāo)識(shí)付材，再存入瀏覽器緩存中朦拖；生效則返回 304，繼續(xù)使用緩存厌衔。
實(shí)際場(chǎng)景應(yīng)用緩存策略
1.頻繁變動(dòng)的資源
Cache-Control: no-cache
對(duì)于頻繁變動(dòng)的資源璧帝，首先需要使用 Cache-Control: no-cache 使瀏覽器每次都請(qǐng)求服務(wù)器，然后配合 ETag 或者 Last-Modified 來(lái)驗(yàn)證資源是否有效富寿。這樣的做法雖然不能節(jié)省請(qǐng)求數(shù)量睬隶，但是能顯著減少響應(yīng)數(shù)據(jù)大小。
2.不常變化的資源
Cache-Control: max-age=31536000
通常在處理這類(lèi)資源時(shí)页徐，給它們的 Cache-Control 配置一個(gè)很大的 max-age=31536000 (一年)苏潜，這樣瀏覽器之后請(qǐng)求相同的 URL 會(huì)命中強(qiáng)制緩存。而為了解決更新的問(wèn)題变勇，就需要在文件名(或者路徑)中添加 hash恤左， 版本號(hào)等動(dòng)態(tài)字符，之后更改動(dòng)態(tài)字符，從而達(dá)到更改引用 URL 的目的，讓之前的強(qiáng)制緩存失效 (其實(shí)并未立即失效震叮，只是不再使用了而已)。
在線提供的類(lèi)庫(kù) (如 jquery-3.3.1.min.js, lodash.min.js 等) 均采用這個(gè)模式赤嚼。
用戶行為對(duì)瀏覽器緩存的影響
所謂用戶行為對(duì)瀏覽器緩存的影響，指的就是用戶在瀏覽器如何操作時(shí)，會(huì)觸發(fā)怎樣的緩存策略。主要有 3 種：
- 打開(kāi)網(wǎng)頁(yè)纲仍，地址欄輸入地址： 查找 disk cache 中是否有匹配呀袱。如有則使用；如沒(méi)有則發(fā)送網(wǎng)絡(luò)請(qǐng)求郑叠。
- 普通刷新 (F5)：因?yàn)?TAB 并沒(méi)有關(guān)閉夜赵，因此 memory cache 是可用的，會(huì)被優(yōu)先使用(如果匹配的話)锻拘。其次才是 disk cache。
- 強(qiáng)制刷新 (Ctrl + F5)：瀏覽器不使用緩存击蹲，因此發(fā)送的請(qǐng)求頭部均帶有 Cache-control: no-cache(為了兼容署拟，還帶了 Pragma: no-cache),服務(wù)器直接返回 200 和最新內(nèi)容。
