一、簡(jiǎn)介瀏覽器緩存

瀏覽器緩存就是把一個(gè)已經(jīng)請(qǐng)求過(guò)的Web資源（如html頁(yè)面，圖片息裸，js，數(shù)據(jù)等）拷貝一份副本儲(chǔ)存在瀏覽器中沪编。緩存會(huì)根據(jù)進(jìn)來(lái)的請(qǐng)求保存輸出內(nèi)容的副本呼盆。當(dāng)下一個(gè)請(qǐng)求來(lái)到的時(shí)候，如果是相同的URL蚁廓，緩存會(huì)根據(jù)緩存機(jī)制決定是直接使用副本響應(yīng)訪問(wèn)請(qǐng)求访圃，還是向服務(wù)器再次發(fā)送請(qǐng)求，從而返回新的數(shù)據(jù)相嵌。

緩存的優(yōu)點(diǎn)：

• 優(yōu)秀的緩存策略可以縮短網(wǎng)頁(yè)請(qǐng)求資源的距離腿时，減少延遲。
• 緩存文件可以重復(fù)利用饭宾。
• 減少帶寬資源浪費(fèi)批糟，降低網(wǎng)絡(luò)負(fù)荷。
• 加快頁(yè)面渲染速度看铆。

常規(guī)數(shù)據(jù)請(qǐng)求主要分為三步：HTTP請(qǐng)求徽鼎、后端處理、瀏覽器響應(yīng)三個(gè)步驟弹惦，瀏覽器緩存可以幫助我們?cè)诘谝缓偷谌襟E中優(yōu)化性能否淤。比如說(shuō)直接使用緩存而不發(fā)起請(qǐng)求，或者發(fā)起了請(qǐng)求但后端存儲(chǔ)的數(shù)據(jù)和前端一致肤频，那么就沒(méi)有必要再將數(shù)據(jù)回傳回來(lái)叹括，這樣就減少了響應(yīng)數(shù)據(jù)。

理解了緩存和緩存策略的優(yōu)點(diǎn)宵荒，接下來(lái)我們帶著以下幾個(gè)問(wèn)題來(lái)深入講解緩存機(jī)制。

1. 緩存的流程
2. 緩存的儲(chǔ)存位置
3. 緩存的分類以及它們之間的異同净嘀、優(yōu)劣报咳。

二、瀏覽器緩存的流程

HTTP請(qǐng)求就是客戶端和服務(wù)端之間應(yīng)答的模式挖藏，當(dāng)瀏覽器發(fā)起請(qǐng)求到服務(wù)端處理暑刃，服務(wù)端響應(yīng)，再到瀏覽器接受數(shù)據(jù)膜眠，渲染頁(yè)面岩臣，這其中數(shù)據(jù)是如何被瀏覽器緩存以及之后如何被瀏覽器再次使用的溜嗜，請(qǐng)先看下圖。

緩存流程.png

通過(guò)上圖容易理解

• 瀏覽器每次發(fā)起請(qǐng)求架谎，都會(huì)先在瀏覽器緩存中查找該請(qǐng)求的結(jié)果以及緩存標(biāo)識(shí)
• 瀏覽器每次拿到服務(wù)器返回的請(qǐng)求結(jié)果都會(huì)將該結(jié)果和緩存標(biāo)識(shí)存入瀏覽器緩存中
  以上兩點(diǎn)解釋了緩存中數(shù)據(jù)的儲(chǔ)存和讀取過(guò)程炸宵，但是瀏覽器緩存的具體位置在哪里？

三谷扣、瀏覽器緩存位置

查看瀏覽器緩存

image.png

緩存位置主要有以下四種

1. Service Worker
2. Memory Cache
3. Disk Cache
4. Push Cache

Service Worker

瀏覽器緩存本質(zhì)還是由服務(wù)器控制土全，但是Service Workder則完全由前端瀏覽器自己控制，可能有人會(huì)說(shuō)会涎，瀏覽器還可以使用Local Storage或者Session Storage來(lái)存儲(chǔ)一些數(shù)據(jù)裹匙，但這種方法缺少很多關(guān)鍵的瀏覽器基礎(chǔ)設(shè)施，比如異步存儲(chǔ)末秃、靜態(tài)資源存儲(chǔ)概页、URL匹配、請(qǐng)求攔截等功能练慕。而Service Worker的出現(xiàn)填補(bǔ)了這些基礎(chǔ)設(shè)施缺少的問(wèn)題惰匙。

需要指出的是，Service Worker并非專門為緩存而設(shè)計(jì)贺待，它還可以解決Web應(yīng)用推送徽曲、后臺(tái)長(zhǎng)計(jì)算等問(wèn)題。Service Worker 是運(yùn)行在瀏覽器背后的獨(dú)立線程麸塞，相對(duì)于頁(yè)面主線程是一個(gè)全新的JS線程秃臣，主Javascript線程是負(fù)責(zé)DOM的線程，而service worker線程被設(shè)計(jì)成無(wú)法訪問(wèn)DOM哪工。從事前端開(kāi)發(fā)的都知道奥此，如果同時(shí)存在多個(gè)UI線程，會(huì)出現(xiàn)操作失控雁比，控制紊亂的效果稚虎，舉個(gè)簡(jiǎn)單的例子，如果一個(gè)線程將DOM刪除偎捎，另一個(gè)線程對(duì)DOM進(jìn)行點(diǎn)擊等操作蠢终，這就出行混亂的現(xiàn)象，所以只能有一個(gè)UI線程茴她，所以Service Worder是一個(gè)不能對(duì)DOM操作的線程寻拂。

Service Worder緩存
Service Worker緩存關(guān)鍵在于監(jiān)聽(tīng)Fetch事件和管理Cache資源，不過(guò)在這之間需要注冊(cè)激活丈牢，這里注冊(cè)激活流程不詳細(xì)講解祭钉，它能攔截所有的請(qǐng)求（通過(guò)監(jiān)聽(tīng)fetch事件，任何對(duì)網(wǎng)絡(luò)資源的請(qǐng)求都會(huì)觸發(fā)該事件）己沛，并內(nèi)置了一個(gè)完全異步的存儲(chǔ)系統(tǒng)（Caches屬性慌核，完全異步并能存儲(chǔ)全部種類的網(wǎng)絡(luò)資源）距境，這是它能精細(xì)化控制緩存的關(guān)鍵。

Service Worker的出現(xiàn)并不是單純的為解決精細(xì)化控制瀏覽器緩存問(wèn)題的垮卓。它能充當(dāng)代理服務(wù)器這一能力（通過(guò)攔截所有請(qǐng)求實(shí)現(xiàn)）垫桂，能夠?qū)崿F(xiàn)HTTP緩存無(wú)法實(shí)現(xiàn)的功能:離線緩存。因?yàn)樵贖TTP緩存策略下扒接，如果一個(gè)資源過(guò)了服務(wù)器規(guī)定的到期時(shí)間伪货，則必須要發(fā)起請(qǐng)求，一旦網(wǎng)絡(luò)連接有問(wèn)題钾怔，整個(gè)網(wǎng)站就會(huì)出現(xiàn)功能問(wèn)題碱呼。而在Service Worker控制下的緩存，能夠在代碼中發(fā)現(xiàn)網(wǎng)絡(luò)連接問(wèn)題并直接返回緩存的資源宗侦。
由于Service Worker能攔截HTTP請(qǐng)求愚臀，充當(dāng)代理服務(wù)器這個(gè)功能，所以必須運(yùn)行咋HTTPS的Origin中矾利，localhost也被認(rèn)為是安全的姑裂，可以用于開(kāi)發(fā)調(diào)試。

Memory Cache（200 from 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í)并不關(guān)心返回資源的HTTP緩存頭Cache-Control是什么值嗜闻，同時(shí)資源的匹配也并非僅僅是對(duì)URL做匹配，還可能會(huì)對(duì)Content-Type桅锄，CORS等其他特征做校驗(yàn)琉雳。

Disk Cache（200 from disk cache）

Disk Cache 也就是存儲(chǔ)在硬盤中的緩存，讀取速度慢點(diǎn)友瘤，但是什么都能存儲(chǔ)到磁盤中咐吼，比之 Memory Cache 勝在容量和存儲(chǔ)時(shí)效性上。
在所有瀏覽器緩存中商佑，Disk Cache 覆蓋面基本是最大的。它會(huì)根據(jù) HTTP Herder 中的字段判斷哪些資源需要緩存厢塘，哪些資源可以不請(qǐng)求直接使用茶没，哪些資源已經(jīng)過(guò)期需要重新請(qǐng)求肌幽。并且即使在跨站點(diǎn)的情況下，相同地址的資源一旦被硬盤緩存下來(lái)抓半，就不會(huì)再次去請(qǐng)求數(shù)據(jù)喂急。絕大部分的緩存都來(lái)自 Disk Cache。

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頭中的緩存指令苗膝。

image.png

原理：圖中簡(jiǎn)化了瀏覽器和服務(wù)器的交互過(guò)程，橫軸代表時(shí)間軸植旧，每個(gè)虛線區(qū)間是1個(gè)RTT辱揭。紅色豎線表示DOM 加載完成的時(shí)間。從圖中可知病附，雖然存在并發(fā)傳輸, 但主頁(yè)index.html和依賴的資源common.css问窃、0684a8bf.css、comb.nowrap.0b772fee.js等總體上是順序的完沪，等待資源響應(yīng)的時(shí)間減慢了主頁(yè)面加載速度域庇。

如果服務(wù)端接收到客戶端主請(qǐng)求，能夠“預(yù)測(cè)”主請(qǐng)求的依賴資源丽焊，在響應(yīng)主請(qǐng)求的同時(shí)较剃，主動(dòng)并發(fā)推送依賴資源至客戶端〖冀。客戶端解析主請(qǐng)求響應(yīng)后写穴，可以”無(wú)延時(shí)”從本地緩存獲取依賴資源, 減少訪問(wèn)延時(shí), 提高訪問(wèn)體驗(yàn)，也加大了鏈路的并發(fā)能力雌贱。Server Push正是基于此原理來(lái)提高網(wǎng)絡(luò)體驗(yàn)啊送。

image.png

圖3說(shuō)明了若采用服務(wù)端推送的功能，則JS/CSS資源基本可以和HTML資源同步到達(dá)欣孤，瀏覽器可以“無(wú)延時(shí)”獲取JS/CSS資源馋没，客戶端的延時(shí)最多可以減少一個(gè)RTT。

如果以上四種緩存都沒(méi)有命中的話降传，那么只能發(fā)起請(qǐng)求來(lái)獲取資源了篷朵。

四、緩存的分類以及它們之間的區(qū)別

HTTP請(qǐng)求根據(jù)緩存類型主要分為兩種緩存方式：強(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)緩存可以通過(guò)設(shè)置兩種 HTTP Header 實(shí)現(xiàn)：Expires 和 Cache-Control鉴扫。

1. 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è)置，并且可以組合使用多種指令：

Cache-Control.png

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)震贵。

image.png

2. 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)求收恢。
Expires其實(shí)是過(guò)時(shí)的產(chǎn)物武学，現(xiàn)階段它的存在只是一種兼容性的寫(xiě)法，如果同時(shí)存在Cache-Control和Expires伦意，Cache-Control的優(yōu)先級(jí)更高火窒。

強(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ò)程，主要有以下兩種類型：Last-Modified 和 ETag慧域。

• 協(xié)商緩存生效鲤竹，返回304和Not Modified

  
  
  image.png

• 協(xié)商緩存失效，返回200和請(qǐng)求結(jié)果

  
  
  image.png

1. Last-Modified和If-Modified-Since
瀏覽器在第一次訪問(wèn)資源時(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仰禽，于是請(qǐng)求添加If-Modified-Since這個(gè)header氮墨，值就是Last-Modified中的值；服務(wù)器再次收到這個(gè)資源請(qǐng)求吐葵，會(huì)根據(jù) If-Modified-Since 中的值與服務(wù)器中這個(gè)資源的最后修改時(shí)間對(duì)比规揪，如果沒(méi)有變化，返回304和空的響應(yīng)體折联，直接從緩存讀取粒褒，如果If-Modified-Since的時(shí)間小于服務(wù)器中這個(gè)資源的最后修改時(shí)間，說(shuō)明文件有更新诚镰，于是返回新的資源文件和200奕坟。

image.png

如果本地打開(kāi)緩存文件，即使沒(méi)有對(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ì)客戶端而言是否被修改過(guò)了阁危。如果服務(wù)器發(fā)現(xiàn)ETag匹配不上，那么直接以常規(guī)GET 200回包形式將新的資源（當(dāng)然也包括了新的ETag）發(fā)給客戶端汰瘫；如果ETag是一致的狂打，則直接返回304知會(huì)客戶端直接使用本地緩存即可。

image.png

3. 兩者的區(qū)別

• 首先在精確度上混弥，Etag要優(yōu)于Last-Modified趴乡。

Last-Modified的時(shí)間單位是秒，如果某個(gè)文件在1秒內(nèi)改變了多次剑逃，那么他們的Last-Modified其實(shí)并沒(méi)有體現(xiàn)出來(lái)修改浙宜，但是Etag每次都會(huì)改變確保了精度；如果是負(fù)載均衡的服務(wù)器蛹磺，各個(gè)服務(wù)器生成的Last-Modified也有可能不一致。

• 第二在性能上同仆，Etag要遜于Last-Modified萤捆，畢竟Last-Modified只需要記錄時(shí)間，而Etag需要服務(wù)器通過(guò)算法來(lái)計(jì)算出一個(gè)hash值（記錄內(nèi)容是否發(fā)生變化）俗批。
• 第三在優(yōu)先級(jí)上俗或，服務(wù)器校驗(yàn)優(yōu)先考慮Etag

五、實(shí)際應(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)制緩存速客。而為了解決更新的問(wèn)題，就需要在文件名(或者路徑)中添加 hash五鲫， 版本號(hào)等動(dòng)態(tài)字符溺职，之后更改動(dòng)態(tài)字符，從而達(dá)到更新URL 的目的位喂，更新強(qiáng)制緩存的有效期浪耘。

六、用戶操作如何觸發(fā)瀏覽器緩存

• 打開(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)容通铲。

簡(jiǎn)單理解：

打開(kāi)新頁(yè)面訪問(wèn)-> 
200（新數(shù)據(jù)毕莱，并緩存） -> 
退出瀏覽器再進(jìn)來(lái)-> 
200(from disk cache) -> 
普通刷新 -> 
200(from memory cache)

七、總結(jié)

強(qiáng)緩存優(yōu)先于協(xié)商緩存颅夺，若強(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ù)使用緩存剧蹂。具體流程圖如下：

image.png

參考文章：深入理解瀏覽器的緩存機(jī)制