轉(zhuǎn)載：https://www.cnblogs.com/chengxs/p/10396066.html
徹底理解瀏覽器的緩存機(jī)制image
HTTP響應(yīng)(Response)報(bào)文，報(bào)文格式為：狀態(tài)行 – HTTP頭(通用信息頭荣倾，響應(yīng)頭米酬，實(shí)體頭) – 響應(yīng)報(bào)文主體，如下圖
注：通用信息頭指的是請求和響應(yīng)報(bào)文都支持的頭域庸娱，
分別為Cache-Control、Connection谐算、Date熟尉、Pragma、Transfer-Encoding洲脂、Upgrade斤儿、Via；實(shí)體頭則是實(shí)體信息的實(shí)體頭域恐锦，分別為Allow往果、Content-Base、Content-Encoding一铅、Content-Language棚放、Content-Length、Content-Location馅闽、Content-MD5飘蚯、Content-Range、Content-Type福也、Etag局骤、Expires、Last-Modified暴凑、extension-header峦甩。這里只是為了方便理解，將通用信息頭现喳，響應(yīng)頭/請求頭凯傲，實(shí)體頭都?xì)w為了HTTP頭。
二嗦篱、緩存過程分析
瀏覽器與服務(wù)器通信的方式為應(yīng)答模式冰单，即是：瀏覽器發(fā)起HTTP請求 – 服務(wù)器響應(yīng)該請求。那么瀏覽器第一次向服務(wù)器發(fā)起該請求后拿到請求結(jié)果灸促，會(huì)根據(jù)響應(yīng)報(bào)文中HTTP頭的緩存標(biāo)識(shí)诫欠，決定是否緩存結(jié)果涵卵，是則將請求結(jié)果和緩存標(biāo)識(shí)存入瀏覽器緩存中，簡單的過程如下圖：
[圖片上傳中...(image-94b2b6-1602743715920-15)]
由上圖我們可以知道
1荒叼、瀏覽器每次發(fā)起請求轿偎，都會(huì)先在瀏覽器緩存中查找該請求的結(jié)果以及緩存標(biāo)識(shí)
2、瀏覽器每次拿到返回的請求結(jié)果都會(huì)將該結(jié)果和緩存標(biāo)識(shí)存入瀏覽器緩存中
以上兩點(diǎn)結(jié)論就是瀏覽器緩存機(jī)制的關(guān)鍵被廓，他確保了每個(gè)請求的緩存存入與讀取坏晦，只要我們再理解瀏覽器緩存的使用規(guī)則，那么所有的問題就迎刃而解了嫁乘，本文也將圍繞著這點(diǎn)進(jìn)行詳細(xì)分析昆婿。
為了方便大家理解，這里我們根據(jù)是否需要向服務(wù)器重新發(fā)起HTTP請求將緩存過程分為兩個(gè)部分亦渗，分別是強(qiáng)制緩存和**協(xié)商緩存 **。
2.1強(qiáng)制緩存
強(qiáng)制緩存就是向?yàn)g覽器緩存查找該請求結(jié)果汁尺，并根據(jù)該結(jié)果的緩存規(guī)則來決定是否使用該緩存結(jié)果的過程法精，強(qiáng)制緩存的情況主要有三種(暫不分析協(xié)商緩存過程)，如下：
（1）不存在該緩存結(jié)果和緩存標(biāo)識(shí)痴突，強(qiáng)制緩存失效搂蜓，則直接向服務(wù)器發(fā)起請求（跟第一次發(fā)起請求一致），如下圖：
（2）存在該緩存結(jié)果和緩存標(biāo)識(shí)辽装，但是結(jié)果已經(jīng)失效帮碰，強(qiáng)制緩存失效，則使用協(xié)商緩存（暫不分析）拾积，如下圖
（3）存在該緩存結(jié)果和緩存標(biāo)識(shí)殉挽，且該結(jié)果沒有還沒有失效，強(qiáng)制緩存生效拓巧，直接返回該結(jié)果斯碌，如下圖：
那么強(qiáng)制緩存的緩存規(guī)則是什么？
答：當(dāng)瀏覽器向服務(wù)器發(fā)送請求的時(shí)候肛度，服務(wù)器會(huì)將緩存規(guī)則放入HTTP響應(yīng)的報(bào)文的HTTP頭中和請求結(jié)果一起返回給瀏覽器傻唾，控制強(qiáng)制緩存的字段分別是Expires和Cache-Control，其中Cache-Conctrol的優(yōu)先級(jí)比Expires高承耿。
2.1.1Expires
Expires是HTTP/1.0控制網(wǎng)頁緩存的字段冠骄，其值為服務(wù)器返回該請求的結(jié)果緩存的到期時(shí)間，即再次發(fā)送請求時(shí)加袋，如果客戶端的時(shí)間小于Expires的值時(shí)凛辣，直接使用緩存結(jié)果。
Expires是HTTP/1.0的字段职烧，但是現(xiàn)在瀏覽器的默認(rèn)使用的是HTTP/1.1蟀给，那么在HTTP/1.1中網(wǎng)頁緩存還是否由Expires控制蝙砌？
到了HTTP/1.1，Expires已經(jīng)被Cache-Control替代跋理，原因在于Expires控制緩存的原理是使用客戶端的時(shí)間與服務(wù)端返回的時(shí)間做對比择克，如果客戶端與服務(wù)端的時(shí)間由于某些原因（時(shí)區(qū)不同；客戶端和服務(wù)端有一方的時(shí)間不準(zhǔn)確）發(fā)生誤差前普，那么強(qiáng)制緩存直接失效肚邢，那么強(qiáng)制緩存存在的意義就毫無意義。拭卿、
那么Cache-Control又是如何進(jìn)行控制的骡湖？
2.1.2Cache-Control
在HTTP/1.1中，Cache-Control是最重要的規(guī)則峻厚，主要用于控制網(wǎng)頁緩存响蕴，主要取值為：
（1）public：所有內(nèi)容都將被緩存（客戶端和代理服務(wù)器都可緩存）
（2）private：所有內(nèi)容只有客戶端可以緩存，Cache-Control的默認(rèn)取值
（3）no-cache：客戶端緩存內(nèi)容惠桃，但是是否使用緩存則需要經(jīng)過協(xié)商緩存來驗(yàn)證決定
（4）no-store：所有內(nèi)容都不會(huì)被緩存浦夷，即不使用強(qiáng)制緩存，也不使用協(xié)商緩存
（5）max-age=xxx (xxx is numeric)：緩存內(nèi)容將在xxx秒后失效
接下來辜王，我們直接看一個(gè)例子劈狐，如下：
由上面的例子我們可以知道：
（1）HTTP響應(yīng)報(bào)文中expires的時(shí)間值，是一個(gè)絕對值
（2）HTTP響應(yīng)報(bào)文中Cache-Control為max-age=600呐馆，是相對值
由于Cache-Control的優(yōu)先級(jí)比expires肥缔，那么直接根據(jù)Cache-Control的值進(jìn)行緩存，意思就是說在600秒內(nèi)再次發(fā)起該請求汹来，則會(huì)直接使用緩存結(jié)果续膳，強(qiáng)制緩存生效。
注：在無法確定客戶端的時(shí)間是否與服務(wù)端的時(shí)間同步的情況下收班，Cache-Control相比于expires是更好的選擇姑宽，所以同時(shí)存在時(shí)，只有Cache-Control生效闺阱。
了解強(qiáng)制緩存的過程后炮车，我們拓展性的思考一下：
瀏覽器的緩存存放在哪里，如何在瀏覽器中判斷強(qiáng)制緩存是否生效酣溃？
這里我們以博客的請求為例瘦穆，狀態(tài)碼為灰色的請求則代表使用了強(qiáng)制緩存，請求對應(yīng)的Size值則代表該緩存存放的位置赊豌，分別為from memory cache 和 from disk cache扛或。
那么from memory cache 和 from disk cache又分別代表的是什么呢？什么時(shí)候會(huì)使用from disk cache碘饼，什么時(shí)候會(huì)使用from memory cache呢熙兔？
from memory cache代表使用內(nèi)存中的緩存悲伶，from disk cache則代表使用的是硬盤中的緩存，瀏覽器讀取緩存的順序?yàn)閙emory –> disk住涉。
雖然我已經(jīng)直接把結(jié)論說出來了麸锉，但是相信有不少人對此不能理解，那么接下來我們一起詳細(xì)分析一下緩存讀取問題舆声，這里仍讓以我的博客為例進(jìn)行分析：
訪問https://heyingye.github.io/ –> 200 –> 關(guān)閉博客的標(biāo)簽頁 –> 重新打開https://heyingye.github.io/ –> 200(from disk cache) –> 刷新 –> 200(from memory cache)
過程如下：
（1）訪問博客網(wǎng)站
（2）關(guān)閉博客的標(biāo)簽頁
（3）重新打開博客
（4）刷新
看到這里可能有人小伙伴問了花沉，最后一個(gè)步驟刷新的時(shí)候，不是同時(shí)存在著from disk cache和from memory cache嗎媳握？
對于這個(gè)問題碱屁，我們需要了解內(nèi)存緩存(from memory cache)和硬盤緩存(from disk cache)，如下:
（1）內(nèi)存緩存(from memory cache)：內(nèi)存緩存具有兩個(gè)特點(diǎn)蛾找，分別是快速讀取和時(shí)效性：
1娩脾、快速讀取：內(nèi)存緩存會(huì)將編譯解析后的文件，直接存入該進(jìn)程的內(nèi)存中打毛，占據(jù)該進(jìn)程一定的內(nèi)存資源柿赊，以方便下次運(yùn)行使用時(shí)的快速讀取。
2隘冲、時(shí)效性：一旦該進(jìn)程關(guān)閉闹瞧，則該進(jìn)程的內(nèi)存則會(huì)清空绑雄。
（2）硬盤緩存(from disk cache)：硬盤緩存則是直接將緩存寫入硬盤文件中展辞，讀取緩存需要對該緩存存放的硬盤文件進(jìn)行I/O操作，然后重新解析該緩存內(nèi)容万牺，讀取復(fù)雜罗珍，速度比內(nèi)存緩存慢。
在瀏覽器中脚粟，瀏覽器會(huì)在js和圖片等文件解析執(zhí)行后直接存入內(nèi)存緩存中覆旱，那么當(dāng)刷新頁面時(shí)只需直接從內(nèi)存緩存中讀取(from memory cache)；而css文件則會(huì)存入硬盤文件中核无，所以每次渲染頁面都需要從硬盤讀取緩存(from disk cache)扣唱。
2.2協(xié)商緩存
協(xié)商緩存就是強(qiáng)制緩存失效后，瀏覽器攜帶緩存標(biāo)識(shí)向服務(wù)器發(fā)起請求团南，由服務(wù)器根據(jù)緩存標(biāo)識(shí)決定是否使用緩存的過程噪沙，主要有以下兩種情況：
（1）協(xié)商緩存生效，返回304吐根，如下
（2）協(xié)商緩存失敗正歼，返回200和請求結(jié)果，如下
同樣拷橘，協(xié)商緩存的標(biāo)識(shí)也是在響應(yīng)報(bào)文的HTTP頭中和請求結(jié)果一起返回給瀏覽器的局义，控制協(xié)商緩存的字段分別有：Last-Modified / If-Modified-Since和Etag / If-None-Match喜爷，其中Etag / If-None-Match的優(yōu)先級(jí)比Last-Modified / If-Modified-Since高。
2.2.1Last-Modified / If-Modified-Since
（1）Last-Modified是服務(wù)器響應(yīng)請求時(shí)萄唇，返回該資源文件在服務(wù)器最后被修改的時(shí)間檩帐，如下：
（2）If-Modified-Since則是客戶端再次發(fā)起該請求時(shí)，攜帶上次請求返回的Last-Modified值穷绵，通過此字段值告訴服務(wù)器該資源上次請求返回的最后被修改時(shí)間轿塔。服務(wù)器收到該請求，發(fā)現(xiàn)請求頭含有If-Modified-Since字段仲墨，則會(huì)根據(jù)If-Modified-Since的字段值與該資源在服務(wù)器的最后被修改時(shí)間做對比勾缭，若服務(wù)器的資源最后被修改時(shí)間大于If-Modified-Since的字段值，則重新返回資源目养，狀態(tài)碼為200俩由；否則則返回304，代表資源無更新癌蚁，可繼續(xù)使用緩存文件幻梯，如下。
2.2.2Etag / If-None-Match
（1）Etag是服務(wù)器響應(yīng)請求時(shí)努释，返回當(dāng)前資源文件的一個(gè)唯一標(biāo)識(shí)(由服務(wù)器生成)碘梢，如下：
（2）If-None-Match是客戶端再次發(fā)起該請求時(shí)，攜帶上次請求返回的唯一標(biāo)識(shí)Etag值伐蒂，通過此字段值告訴服務(wù)器該資源上次請求返回的唯一標(biāo)識(shí)值煞躬。服務(wù)器收到該請求后，發(fā)現(xiàn)該請求頭中含有If-None-Match逸邦，則會(huì)根據(jù)If-None-Match的字段值與該資源在服務(wù)器的Etag值做對比恩沛，一致則返回304，代表資源無更新缕减，繼續(xù)使用緩存文件雷客；不一致則重新返回資源文件，狀態(tài)碼為200桥狡，如下搅裙。
注：Etag / If-None-Match優(yōu)先級(jí)高于Last-Modified / If-Modified-Since，同時(shí)存在則只有Etag / If-None-Match生效裹芝。
三部逮、總結(jié)
強(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é)商緩存失效炬搭，那么代表該請求的緩存失效蜈漓，重新獲取請求結(jié)果穆桂，再存入瀏覽器緩存中；生效則返回304融虽，繼續(xù)使用緩存享完，主要過程如下：
以上便是瀏覽器緩存的過程
