一绿贞、前言
緩存可以說是性能優(yōu)化中簡(jiǎn)單高效的一種優(yōu)化方式了。一個(gè)優(yōu)秀的緩存策略可以縮短網(wǎng)頁(yè)請(qǐng)求資源的距離橘原，減少延遲籍铁，并且由于緩存文件可以重復(fù)利用，還可以減少帶寬趾断，降低網(wǎng)絡(luò)負(fù)荷拒名。
對(duì)于一個(gè)數(shù)據(jù)請(qǐng)求來(lái)說，可以分為發(fā)起網(wǎng)絡(luò)請(qǐng)求芋酌、后端處理靡狞、瀏覽器響應(yīng)三個(gè)步驟。瀏覽器緩存可以幫助我們?cè)诘谝缓偷谌襟E中優(yōu)化性能隔嫡。比如說直接使用緩存而不發(fā)起請(qǐng)求甸怕，或者發(fā)起了請(qǐng)求但后端存儲(chǔ)的數(shù)據(jù)和前端一致，那么就沒有必要再將數(shù)據(jù)回傳回來(lái)腮恩，這樣就減少了響應(yīng)數(shù)據(jù)梢杭。
接下來(lái)的內(nèi)容中我們將通過緩存位置、緩存策略以及實(shí)際場(chǎng)景應(yīng)用緩存策略來(lái)探討瀏覽器緩存機(jī)制秸滴。
如需獲取思維導(dǎo)圖或想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,也歡迎加我個(gè)人微信frontJS,一起交流技術(shù)武契！
二、緩存位置
從緩存位置上來(lái)說分為四種荡含，并且各自有優(yōu)先級(jí)咒唆，當(dāng)依次查找緩存且都沒有命中的時(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)聽到 install 事件以后就可以緩存需要的文件阔籽，那么在下次用戶訪問的時(shí)候就可以通過攔截請(qǐng)求的方式查詢是否存在緩存辩撑，存在緩存的話就可以直接讀取緩存文件，否則就去請(qǐng)求數(shù)據(jù)仿耽。
當(dāng) Service Worker 沒有命中緩存的時(shí)候合冀，我們需要去調(diào)用 fetch 函數(shù)獲取數(shù)據(jù)。也就是說项贺，如果我們沒有在 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ù)肯定比磁盤快,內(nèi)存緩存雖然讀取高效完残，可是緩存持續(xù)性很短伏钠，會(huì)隨著進(jìn)程的釋放而釋放。 一旦我們關(guān)閉 Tab 頁(yè)面谨设，內(nèi)存中的緩存也就被釋放了熟掂。
那么既然內(nèi)存緩存這么高效，我們是不是能讓數(shù)據(jù)都存放在內(nèi)存中呢扎拣？
這是不可能的赴肚。計(jì)算機(jī)中的內(nèi)存一定比硬盤容量小得多，操作系統(tǒng)需要精打細(xì)算內(nèi)存的使用二蓝，所以能讓我們使用的內(nèi)存必然不多誉券。
當(dāng)我們?cè)L問過頁(yè)面以后，再次刷新頁(yè)面刊愚，可以發(fā)現(xiàn)很多數(shù)據(jù)都來(lái)自于內(nèi)存緩存
內(nèi)存緩存中有一塊重要的緩存資源是preloader相關(guān)指令（例如<link rel="prefetch">）下載的資源踊跟。總所周知preloader的相關(guān)指令已經(jīng)是頁(yè)面優(yōu)化的常見手段之一百拓，它可以一邊解析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ǔ)在硬盤中的緩存，讀取速度慢點(diǎn)俊鱼，但是什么都能存儲(chǔ)到磁盤中刻像，比之 Memory Cache 勝在容量和存儲(chǔ)時(shí)效性上。
在所有瀏覽器緩存中并闲，Disk Cache 覆蓋面基本是最大的细睡。它會(huì)根據(jù) HTTP Herder 中的字段判斷哪些資源需要緩存，哪些資源可以不請(qǐng)求直接使用帝火，哪些資源已經(jīng)過期需要重新請(qǐng)求溜徙。并且即使在跨站點(diǎn)的情況下，相同地址的資源一旦被硬盤緩存下來(lái)犀填，就不會(huì)再次去請(qǐng)求數(shù)據(jù)蠢壹。絕大部分的緩存都來(lái)自 Disk Cache，關(guān)于 HTTP 的協(xié)議頭中的緩存字段九巡，我們會(huì)在下文進(jìn)行詳細(xì)介紹图贸。
瀏覽器會(huì)把哪些文件丟進(jìn)內(nèi)存中？哪些丟進(jìn)硬盤中冕广？
關(guān)于這點(diǎn)疏日，網(wǎng)上說法不一，不過以下觀點(diǎn)比較靠得兹龊骸：
- 對(duì)于大文件來(lái)說制恍，大概率是不存儲(chǔ)在內(nèi)存中的，反之優(yōu)先
- 當(dāng)前系統(tǒng)內(nèi)存使用率高的話神凑，文件優(yōu)先存儲(chǔ)進(jìn)硬盤
4.Push Cache
Push Cache（推送緩存）是 HTTP/2 中的內(nèi)容净神，當(dāng)以上三種緩存都沒有命中時(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)不夠普及洪橘。這里推薦閱讀Jake Archibald的 HTTP/2 push is tougher than I thought 這篇文章跪者，文章中的幾個(gè)結(jié)論：
- 所有的資源都能被推送，并且能夠被緩存,但是 Edge 和 Safari 瀏覽器支持相對(duì)比較差
- 可以推送 no-cache 和 no-store 的資源
- 一旦連接被關(guān)閉熄求，Push Cache 就被釋放
- 多個(gè)頁(yè)面可以使用同一個(gè)HTTP/2的連接渣玲，也就可以使用同一個(gè)Push Cache。這主要還是依賴瀏覽器的實(shí)現(xiàn)而定弟晚，出于對(duì)性能的考慮忘衍，有的瀏覽器會(huì)對(duì)相同域名但不同的tab標(biāo)簽使用同一個(gè)HTTP連接。
- Push Cache 中的緩存只能被使用一次
- 瀏覽器可以拒絕接受已經(jīng)存在的資源推送
- 你可以給其他域名推送資源
如果以上四種緩存都沒有命中的話卿城，那么只能發(fā)起請(qǐng)求來(lái)獲取資源了枚钓。
那么為了性能上的考慮，大部分的接口都應(yīng)該選擇好緩存策略瑟押，通常瀏覽器緩存策略分為兩種：強(qiáng)緩存和協(xié)商緩存搀捷，并且緩存策略都是通過設(shè)置 HTTP Header 來(lái)實(shí)現(xiàn)的。
三多望、緩存過程分析
瀏覽器與服務(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ī)則，那么所有的問題就迎刃而解了木西，本文也將圍繞著這點(diǎn)進(jìn)行詳細(xì)分析畴栖。為了方便大家理解，這里我們根據(jù)是否需要向服務(wù)器重新發(fā)起HTTP請(qǐng)求將緩存過程分為兩個(gè)部分八千，分別是強(qiáng)緩存和協(xié)商緩存吗讶。
四、強(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)緩存可以通過設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Expires 和 Cache-Control膜毁。
1.Expires
緩存過期時(shí)間，用來(lái)指定資源到期的時(shí)間，是服務(wù)器端的具體的時(shí)間點(diǎn)瘟滨。也就是說候醒，Expires=max-age + 請(qǐng)求時(shí)間，需要和Last-modified結(jié)合使用杂瘸。Expires是Web服務(wù)器響應(yīng)消息頭字段倒淫，在響應(yīng)http請(qǐng)求時(shí)告訴瀏覽器在過期時(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 后過期谦疾，需要再次請(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)說響應(yīng)可被任何中間節(jié)點(diǎn)緩存策彤，如 Browser <-- proxy1 <-- proxy2 <-- Server，中間的proxy可以緩存資源匣摘，比如下次再請(qǐng)求同一資源proxy1直接把自己緩存的東西給 Browser 而不再向proxy2要店诗。
private：所有內(nèi)容只有客戶端可以緩存，Cache-Control的默認(rèn)取值音榜。具體來(lái)說庞瘸，表示中間節(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)過協(xié)商緩存來(lái)驗(yàn)證決定常拓。表示不使用 Cache-Control的緩存控制方式做前置驗(yàn)證朴下，而是使用 Etag 或者Last-Modified字段來(lái)控制緩存胖眷。需要注意的是疟羹，no-cache這個(gè)名字有一點(diǎn)誤導(dǎo)缅刽。設(shè)置了no-cache之后藤滥，并不是說瀏覽器就不再緩存數(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：能容忍的最大過期時(shí)間坯门。max-stale指令標(biāo)示了客戶端愿意接收一個(gè)已經(jīng)過期了的響應(yīng)微饥。如果指定了max-stale的值，則最大容忍時(shí)間為對(duì)應(yīng)的秒數(shù)古戴。如果沒有指定欠橘，那么說明瀏覽器愿意接收任何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)肃续。
從圖中我們可以看到，我們可以將多個(gè)指令配合起來(lái)一起使用述暂，達(dá)到多個(gè)目的痹升。比如說我們希望資源能被緩存下來(lái)，并且是客戶端和代理服務(wù)器都能緩存畦韭，還能設(shè)置緩存失效時(shí)間等等疼蛾。
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í)是過時(shí)的產(chǎn)物赠法，現(xiàn)階段它的存在只是一種兼容性的寫法麦轰。
強(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í)決定是否使用緩存的過程妹笆，主要有以下兩種情況：
-
協(xié)商緩存生效块请，返回304和Not Modified
協(xié)商緩存生效 協(xié)商緩存失效，返回200和請(qǐng)求結(jié)果
協(xié)商緩存可以通過設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Last-Modified 和 ETag 拳缠。
1.Last-Modified和If-Modified-Since
瀏覽器在第一次訪問資源時(shí)墩新，服務(wù)器返回資源的同時(shí)，在response header中添加 Last-Modified的header脊凰，值是這個(gè)資源在服務(wù)器上的最后修改時(shí)間抖棘，瀏覽器接收后緩存文件和header茂腥；
Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT
瀏覽器下一次請(qǐng)求這個(gè)資源狸涌，瀏覽器檢測(cè)到有 Last-Modified這個(gè)header，于是添加If-Modified-Since這個(gè)header最岗，值就是Last-Modified中的值帕胆；服務(wù)器再次收到這個(gè)資源請(qǐng)求，會(huì)根據(jù) If-Modified-Since 中的值與服務(wù)器中這個(gè)資源的最后修改時(shí)間對(duì)比般渡，如果沒有變化懒豹，返回304和空的響應(yīng)體，直接從緩存讀取驯用，如果If-Modified-Since的時(shí)間小于服務(wù)器中這個(gè)資源的最后修改時(shí)間脸秽，說明文件有更新，于是返回新的資源文件和200
但是 Last-Modified 存在一些弊端：
- 如果本地打開緩存文件蝴乔，即使沒有對(duì)文件進(jìn)行修改记餐，但還是會(huì)造成 Last-Modified 被修改，服務(wù)端不能命中緩存導(dǎo)致發(fā)送相同的資源
- 因?yàn)?Last-Modified 只能以秒計(jì)時(shí)薇正，如果在不可感知的時(shí)間內(nèi)修改完成文件片酝，那么服務(wù)端會(huì)認(rèn)為資源還是命中了，不會(huì)返回正確的資源
既然根據(jù)文件修改時(shí)間來(lái)決定是否緩存尚有不足挖腰，能否可以直接根據(jù)文件內(nèi)容是否修改來(lái)決定緩存策略雕沿？所以在 HTTP / 1.1 出現(xiàn)了 ETag 和If-None-Match
2.ETag和If-None-Match
Etag是服務(wù)器響應(yīng)請(qǐng)求時(shí)，返回當(dāng)前資源文件的一個(gè)唯一標(biāo)識(shí)(由服務(wù)器生成)猴仑，只要資源有變化审轮，Etag就會(huì)重新生成。瀏覽器在下一次加載資源向服務(wù)器發(fā)送請(qǐng)求時(shí)，會(huì)將上一次返回的Etag值放到request header里的If-None-Match里疾渣，服務(wù)器只需要比較客戶端傳來(lái)的If-None-Match跟自己服務(wù)器上該資源的ETag是否一致贤姆，就能很好地判斷資源相對(duì)客戶端而言是否被修改過了。如果服務(wù)器發(fā)現(xiàn)ETag匹配不上稳衬，那么直接以常規(guī)GET 200回包形式將新的資源（當(dāng)然也包括了新的ETag）發(fā)給客戶端霞捡；如果ETag是一致的，則直接返回304知會(huì)客戶端直接使用本地緩存即可薄疚。
3.兩者之間對(duì)比：
- 首先在精確度上碧信，Etag要優(yōu)于Last-Modified。
Last-Modified的時(shí)間單位是秒街夭，如果某個(gè)文件在1秒內(nèi)改變了多次砰碴，那么他們的Last-Modified其實(shí)并沒有體現(xiàn)出來(lái)修改，但是Etag每次都會(huì)改變確保了精度板丽；如果是負(fù)載均衡的服務(wù)器呈枉，各個(gè)服務(wù)器生成的Last-Modified也有可能不一致。
- 第二在性能上埃碱，Etag要遜于Last-Modified猖辫，畢竟Last-Modified只需要記錄時(shí)間，而Etag需要服務(wù)器通過算法來(lái)計(jì)算出一個(gè)hash值砚殿。
- 第三在優(yōu)先級(jí)上啃憎，服務(wù)器校驗(yàn)優(yōu)先考慮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ù)使用緩存睛藻。具體流程圖如下：
看到這里，不知道你是否存在這樣一個(gè)疑問:如果什么緩存策略都沒設(shè)置邢隧，那么瀏覽器會(huì)怎么處理店印？
對(duì)于這種情況，瀏覽器會(huì)采用一個(gè)啟發(fā)式的算法倒慧，通常會(huì)取響應(yīng)頭中的 Date 減去 Last-Modified 值的 10% 作為緩存時(shí)間按摘。
七包券、實(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
通常在處理這類資源時(shí)侍郭，給它們的 Cache-Control 配置一個(gè)很大的 max-age=31536000 (一年)，這樣瀏覽器之后請(qǐng)求相同的 URL 會(huì)命中強(qiáng)制緩存掠河。而為了解決更新的問題亮元，就需要在文件名(或者路徑)中添加 hash， 版本號(hào)等動(dòng)態(tài)字符唠摹，之后更改動(dòng)態(tài)字符爆捞，從而達(dá)到更改引用 URL 的目的，讓之前的強(qiáng)制緩存失效 (其實(shí)并未立即失效勾拉，只是不再使用了而已)煮甥。
在線提供的類庫(kù) (如 jquery-3.3.1.min.js, lodash.min.js 等) 均采用這個(gè)模式。
八藕赞、用戶行為對(duì)瀏覽器緩存的影響
所謂用戶行為對(duì)瀏覽器緩存的影響成肘，指的就是用戶在瀏覽器如何操作時(shí)，會(huì)觸發(fā)怎樣的緩存策略找默。主要有 3 種：
- 打開網(wǎng)頁(yè)艇劫，地址欄輸入地址： 查找 disk cache 中是否有匹配吼驶。如有則使用惩激；如沒有則發(fā)送網(wǎng)絡(luò)請(qǐng)求。
- 普通刷新 (F5)：因?yàn)?TAB 并沒有關(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)容羞反。
