概述
瀏覽器的緩存機制也就是我們說的HTTP緩存機制屹堰，其機制是根據(jù)HTTP報文的緩存標(biāo)識進(jìn)行的训措，所以在分析瀏覽器緩存機制之前瞧筛，我們先使用圖文簡單介紹一下HTTP報文，HTTP報文分為兩種：HTTP請求(Request)報文鉴竭，報文格式為：請求行 – HTTP頭(通用信息頭，請求頭，實體頭) – 請求報文主體(只有POST才有報文主體)，如下圖
HTTP響應(yīng)(Response)報文瘸味，報文格式為：狀態(tài)行 – HTTP頭(通用信息頭，響應(yīng)頭够挂，實體頭) – 響應(yīng)報文主體旁仿，如下圖
注：通用信息頭指的是請求和響應(yīng)報文都支持的頭域，分別為Cache-Control孽糖、Connection枯冈、Date、Pragma梭姓、Transfer-Encoding霜幼、Upgrade、Via誉尖；實體頭則是實體信息的實體頭域罪既，分別為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)頭/請求頭，實體頭都?xì)w為了HTTP頭。以上的概念在這里我們不做多講解漏健，只簡單介紹嚎货，有興趣的童鞋可以自行研究。
緩存過程分析
瀏覽器與服務(wù)器通信的方式為應(yīng)答模式蔫浆，即是：瀏覽器發(fā)起HTTP請求 – 服務(wù)器響應(yīng)該請求殖属。那么瀏覽器第一次向服務(wù)器發(fā)起該請求后拿到請求結(jié)果，會根據(jù)響應(yīng)報文中HTTP頭的緩存標(biāo)識克懊，決定是否緩存結(jié)果忱辅，是則將請求結(jié)果和緩存標(biāo)識存入瀏覽器緩存中七蜘，簡單的過程如下圖：
由上圖我們可以知道：
瀏覽器每次發(fā)起請求谭溉，都會先在瀏覽器緩存中查找該請求的結(jié)果以及緩存標(biāo)識
瀏覽器每次拿到返回的請求結(jié)果都會將該結(jié)果和緩存標(biāo)識存入瀏覽器緩存中
以上兩點結(jié)論就是瀏覽器緩存機制的關(guān)鍵，他確保了每個請求的緩存存入與讀取橡卤，只要我們再理解瀏覽器緩存的使用規(guī)則扮念，那么所有的問題就迎刃而解了，本文也將圍繞著這點進(jìn)行詳細(xì)分析碧库。為了方便大家理解柜与，這里我們根據(jù)是否需要向服務(wù)器重新發(fā)起HTTP請求將緩存過程分為兩個部分，分別是強制緩存和協(xié)商緩存嵌灰。
強制緩存
強制緩存就是向瀏覽器緩存查找該請求結(jié)果弄匕，并根據(jù)該結(jié)果的緩存規(guī)則來決定是否使用該緩存結(jié)果的過程，強制緩存的情況主要有三種(暫不分析協(xié)商緩存過程)沽瞭，如下：不存在該緩存結(jié)果和緩存標(biāo)識迁匠，強制緩存失效，則直接向服務(wù)器發(fā)起請求（跟第一次發(fā)起請求一致）驹溃，如下圖：
存在該緩存結(jié)果和緩存標(biāo)識城丧，但該結(jié)果已失效，強制緩存失效豌鹤，則使用協(xié)商緩存(暫不分析)亡哄，如下圖
存在該緩存結(jié)果和緩存標(biāo)識，且該結(jié)果尚未失效布疙，強制緩存生效蚊惯，直接返回該結(jié)果，如下圖
那么強制緩存的緩存規(guī)則是什么灵临？
當(dāng)瀏覽器向服務(wù)器發(fā)起請求時截型，服務(wù)器會將緩存規(guī)則放入HTTP響應(yīng)報文的HTTP頭中和請求結(jié)果一起返回給瀏覽器，控制強制緩存的字段分別是Expires和Cache-Control俱诸，其中Cache-Control優(yōu)先級比Expires高菠劝。
Expires
Expires是HTTP/1.0控制網(wǎng)頁緩存的字段，其值為服務(wù)器返回該請求結(jié)果緩存的到期時間，即再次發(fā)起該請求時赶诊，如果客戶端的時間小于Expires的值時笼平，直接使用緩存結(jié)果。
Expires是HTTP/1.0的字段舔痪，但是現(xiàn)在瀏覽器默認(rèn)使用的是HTTP/1.1寓调，那么在HTTP/1.1中網(wǎng)頁緩存還是否由Expires控制？
到了HTTP/1.1锄码，Expire已經(jīng)被Cache-Control替代夺英，原因在于Expires控制緩存的原理是使用客戶端的時間與服務(wù)端返回的時間做對比，那么如果客戶端與服務(wù)端的時間因為某些原因（例如時區(qū)不同滋捶；客戶端和服務(wù)端有一方的時間不準(zhǔn)確）發(fā)生誤差痛悯，那么強制緩存則會直接失效，這樣的話強制緩存的存在則毫無意義重窟，那么Cache-Control又是如何控制的呢载萌？
Cache-Control
在HTTP/1.1中，Cache-Control是最重要的規(guī)則巡扇，主要用于控制網(wǎng)頁緩存扭仁，主要取值為：
public：所有內(nèi)容都將被緩存（客戶端和代理服務(wù)器都可緩存）
private：所有內(nèi)容只有客戶端可以緩存，Cache-Control的默認(rèn)取值
no-cache：客戶端緩存內(nèi)容厅翔，但是是否使用緩存則需要經(jīng)過協(xié)商緩存來驗證決定
no-store：所有內(nèi)容都不會被緩存乖坠，即不使用強制緩存，也不使用協(xié)商緩存
max-age=xxx (xxx is numeric)：緩存內(nèi)容將在xxx秒后失效
接下來刀闷，我們直接看一個例子熊泵，如下：
由上面的例子我們可以知道：
HTTP響應(yīng)報文中expires的時間值，是一個絕對值
HTTP響應(yīng)報文中Cache-Control為max-age=600涩赢，是相對值
由于Cache-Control的優(yōu)先級比expires戈次，那么直接根據(jù)Cache-Control的值進(jìn)行緩存，意思就是說在600秒內(nèi)再次發(fā)起該請求筒扒，則會直接使用緩存結(jié)果怯邪，強制緩存生效。注：在無法確定客戶端的時間是否與服務(wù)端的時間同步的情況下花墩，Cache-Control相比于expires是更好的選擇悬秉，所以同時存在時，只有Cache-Control生效冰蘑。了解強制緩存的過程后和泌，我們拓展性的思考一下：
瀏覽器的緩存存放在哪里，如何在瀏覽器中判斷強制緩存是否生效祠肥？
這里我們以博客的請求為例武氓，狀態(tài)碼為灰色的請求則代表使用了強制緩存，請求對應(yīng)的Size值則代表該緩存存放的位置，分別為from memory cache 和 from disk cache县恕。
那么from memory cache 和 from disk cache又分別代表的是什么呢东羹？什么時候會使用from disk cache，什么時候會使用from memory cache呢忠烛？
from memory cache代表使用內(nèi)存中的緩存属提，from disk cache則代表使用的是硬盤中的緩存，瀏覽器讀取緩存的順序為memory –> 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)過程如下：
訪問https://heyingye.github.io/
關(guān)閉博客的標(biāo)簽頁
重新打開https://heyingye.github.io/
刷新
看到這里可能有人小伙伴問了恕酸，最后一個步驟刷新的時候，不是同時存在著from disk cache和from memory cache嗎屹耐？
對于這個問題尸疆，我們需要了解內(nèi)存緩存(from memory cache)和硬盤緩存(from disk cache)，如下:
內(nèi)存緩存(from memory cache)：內(nèi)存緩存具有兩個特點惶岭，分別是快速讀取和時效性：
快速讀取：內(nèi)存緩存會將編譯解析后的文件犯眠，直接存入該進(jìn)程的內(nèi)存中按灶，占據(jù)該進(jìn)程一定的內(nèi)存資源，以方便下次運行使用時的快速讀取筐咧。
時效性：一旦該進(jìn)程關(guān)閉鸯旁，則該進(jìn)程的內(nèi)存則會清空。
硬盤緩存(from disk cache)：硬盤緩存則是直接將緩存寫入硬盤文件中量蕊，讀取緩存需要對該緩存存放的硬盤文件進(jìn)行I/O操作铺罢，然后重新解析該緩存內(nèi)容，讀取復(fù)雜残炮，速度比內(nèi)存緩存慢韭赘。
在瀏覽器中，瀏覽器會在js和圖片等文件解析執(zhí)行后直接存入內(nèi)存緩存中势就，那么當(dāng)刷新頁面時只需直接從內(nèi)存緩存中讀取(from memory cache)泉瞻；而css文件則會存入硬盤文件中，所以每次渲染頁面都需要從硬盤讀取緩存(from disk cache)苞冯。
協(xié)商緩存
協(xié)商緩存就是強制緩存失效后袖牙，瀏覽器攜帶緩存標(biāo)識向服務(wù)器發(fā)起請求，由服務(wù)器根據(jù)緩存標(biāo)識決定是否使用緩存的過程舅锄，主要有以下兩種情況：協(xié)商緩存生效鞭达，返回304，如下
協(xié)商緩存失效，返回200和請求結(jié)果結(jié)果畴蹭，如下
同樣烘贴，協(xié)商緩存的標(biāo)識也是在響應(yīng)報文的HTTP頭中和請求結(jié)果一起返回給瀏覽器的，控制協(xié)商緩存的字段分別有：Last-Modified / If-Modified-Since和Etag / If-None-Match撮胧，其中Etag / If-None-Match的優(yōu)先級比Last-Modified / If-Modified-Since高桨踪。
Last-Modified / If-Modified-Since
Last-Modified是服務(wù)器響應(yīng)請求時，返回該資源文件在服務(wù)器最后被修改的時間芹啥，如下锻离。
If-Modified-Since則是客戶端再次發(fā)起該請求時，攜帶上次請求返回的Last-Modified值墓怀，通過此字段值告訴服務(wù)器該資源上次請求返回的最后被修改時間汽纠。服務(wù)器收到該請求，發(fā)現(xiàn)請求頭含有If-Modified-Since字段傀履，則會根據(jù)If-Modified-Since的字段值與該資源在服務(wù)器的最后被修改時間做對比虱朵，若服務(wù)器的資源最后被修改時間大于If-Modified-Since的字段值，則重新返回資源钓账，狀態(tài)碼為200碴犬；否則則返回304，代表資源無更新梆暮，可繼續(xù)使用緩存文件服协，如下。
Etag / If-None-Match
Etag是服務(wù)器響應(yīng)請求時啦粹，返回當(dāng)前資源文件的一個唯一標(biāo)識(由服務(wù)器生成)偿荷，如下。
If-None-Match是客戶端再次發(fā)起該請求時唠椭，攜帶上次請求返回的唯一標(biāo)識Etag值跳纳，通過此字段值告訴服務(wù)器該資源上次請求返回的唯一標(biāo)識值。服務(wù)器收到該請求后贪嫂，發(fā)現(xiàn)該請求頭中含有If-None-Match寺庄，則會根據(jù)If-None-Match的字段值與該資源在服務(wù)器的Etag值做對比，一致則返回304撩荣，代表資源無更新铣揉，繼續(xù)使用緩存文件；不一致則重新返回資源文件餐曹，狀態(tài)碼為200逛拱，如下。
注：Etag / If-None-Match優(yōu)先級高于Last-Modified / If-Modified-Since台猴，同時存在則只有Etag / If-None-Match生效朽合。
總結(jié)
強制緩存優(yōu)先于協(xié)商緩存進(jìn)行俱两，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進(jìn)行協(xié)商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)曹步，協(xié)商緩存由服務(wù)器決定是否使用緩存宪彩，若協(xié)商緩存失效，那么代表該請求的緩存失效讲婚，重新獲取請求結(jié)果尿孔，再存入瀏覽器緩存中；生效則返回304筹麸，繼續(xù)使用緩存活合，主要過程如下：
