一更耻、概述
瀏覽器的緩存機制也就是我們說的HTTP緩存機制，其機制是根據(jù)HTTP報文的緩存標識進行的罚渐，所以在分析瀏覽器緩存機制之前却汉，我們先使用圖文簡單介紹一下HTTP報文，HTTP報文分為兩種：
同步sau交流學習社區(qū)（首發(fā)）：https://www.mwcxs.top/page/565.html
1荷并、HTTP請求(Request)報文合砂，報文格式為：請求行 – HTTP頭(通用信息頭，請求頭源织，實體頭) – 請求報文主體(只有POST才有報文主體)翩伪，如下圖
注：通用信息頭指的是請求和響應報文都支持的頭域微猖，
分別為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。這里只是為了方便理解渣聚，將通用信息頭独榴，響應頭/請求頭，實體頭都歸為了HTTP頭奕枝。
二棺榔、緩存過程分析
瀏覽器與服務器通信的方式為應答模式，即是：瀏覽器發(fā)起HTTP請求 – 服務器響應該請求隘道。那么瀏覽器第一次向服務器發(fā)起該請求后拿到請求結(jié)果症歇，會根據(jù)響應報文中HTTP頭的緩存標識，決定是否緩存結(jié)果谭梗，是則將請求結(jié)果和緩存標識存入瀏覽器緩存中忘晤，簡單的過程如下圖：
由上圖我們可以知道
1、瀏覽器每次發(fā)起請求激捏，都會先在瀏覽器緩存中查找該請求的結(jié)果以及緩存標識
2设塔、瀏覽器每次拿到返回的請求結(jié)果都會將該結(jié)果和緩存標識存入瀏覽器緩存中
以上兩點結(jié)論就是瀏覽器緩存機制的關鍵，他確保了每個請求的緩存存入與讀取远舅，只要我們再理解瀏覽器緩存的使用規(guī)則闰蛔，那么所有的問題就迎刃而解了痕钢，本文也將圍繞著這點進行詳細分析。
為了方便大家理解序六，這里我們根據(jù)是否需要向服務器重新發(fā)起HTTP請求將緩存過程分為兩個部分任连，分別是強制緩存和協(xié)商緩存 。
2.1強制緩存
強制緩存就是向瀏覽器緩存查找該請求結(jié)果例诀，并根據(jù)該結(jié)果的緩存規(guī)則來決定是否使用該緩存結(jié)果的過程课梳，強制緩存的情況主要有三種(暫不分析協(xié)商緩存過程)，如下：
（1）不存在該緩存結(jié)果和緩存標識余佃，強制緩存失效暮刃，則直接向服務器發(fā)起請求（跟第一次發(fā)起請求一致），如下圖：
（2）存在該緩存結(jié)果和緩存標識爆土，但是結(jié)果已經(jīng)失效椭懊，強制緩存失效，則使用協(xié)商緩存（暫不分析）步势，如下圖
（3）存在該緩存結(jié)果和緩存標識氧猬，且該結(jié)果沒有還沒有失效，強制緩存生效坏瘩，直接返回該結(jié)果盅抚，如下圖：
那么強制緩存的緩存規(guī)則是什么？
答：當瀏覽器向服務器發(fā)送請求的時候倔矾，服務器會將緩存規(guī)則放入HTTP響應的報文的HTTP頭中和請求結(jié)果一起返回給瀏覽器妄均，控制強制緩存的字段分別是Expires和Cache-Control，其中Cache-Conctrol的優(yōu)先級比Expires高哪自。
2.1.1Expires
Expires是HTTP/1.0控制網(wǎng)頁緩存的字段丰包，其值為服務器返回該請求的結(jié)果緩存的到期時間，即再次發(fā)送請求時壤巷，如果客戶端的時間小于Expires的值時邑彪，直接使用緩存結(jié)果。
Expires是HTTP/1.0的字段胧华，但是現(xiàn)在瀏覽器的默認使用的是HTTP/1.1寄症，那么在HTTP/1.1中網(wǎng)頁緩存還是否由Expires控制？
到了HTTP/1.1矩动，Expires已經(jīng)被Cache-Control替代有巧，原因在于Expires控制緩存的原理是使用客戶端的時間與服務端返回的時間做對比，如果客戶端與服務端的時間由于某些原因（時區(qū)不同铅忿；客戶端和服務端有一方的時間不準確）發(fā)生誤差剪决，那么強制緩存直接失效，那么強制緩存存在的意義就毫無意義。柑潦、
那么Cache-Control又是如何進行控制的享言？
2.1.2Cache-Control
在HTTP/1.1中，Cache-Control是最重要的規(guī)則渗鬼，主要用于控制網(wǎng)頁緩存览露，主要取值為：
（1）public：所有內(nèi)容都將被緩存（客戶端和代理服務器都可緩存）
（2）private：所有內(nèi)容只有客戶端可以緩存，Cache-Control的默認取值
（3）no-cache：客戶端緩存內(nèi)容譬胎，但是是否使用緩存則需要經(jīng)過協(xié)商緩存來驗證決定
（4）no-store：所有內(nèi)容都不會被緩存差牛，即不使用強制緩存，也不使用協(xié)商緩存
（5）max-age=xxx (xxx is numeric)：緩存內(nèi)容將在xxx秒后失效
接下來堰乔，我們直接看一個例子偏化，如下：
由上面的例子我們可以知道：
（1）HTTP響應報文中expires的時間值，是一個絕對值
（2）HTTP響應報文中Cache-Control為max-age=600镐侯，是相對值
由于Cache-Control的優(yōu)先級比expires侦讨，那么直接根據(jù)Cache-Control的值進行緩存，意思就是說在600秒內(nèi)再次發(fā)起該請求苟翻，則會直接使用緩存結(jié)果韵卤，強制緩存生效。
注：在無法確定客戶端的時間是否與服務端的時間同步的情況下崇猫，Cache-Control相比于expires是更好的選擇沈条，所以同時存在時，只有Cache-Control生效诅炉。
了解強制緩存的過程后蜡歹，我們拓展性的思考一下：
瀏覽器的緩存存放在哪里，如何在瀏覽器中判斷強制緩存是否生效汞扎？
這里我們以博客的請求為例季稳，狀態(tài)碼為灰色的請求則代表使用了強制緩存擅这，請求對應的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é)論說出來了玫坛，但是相信有不少人對此不能理解结笨，那么接下來我們一起詳細分析一下緩存讀取問題，這里仍讓以我的博客為例進行分析：
訪問https://heyingye.github.io/ –> 200 –> 關閉博客的標簽頁 –> 重新打開https://heyingye.github.io/ –> 200(from disk cache) –> 刷新 –> 200(from memory cache)
過程如下：
（1）訪問博客網(wǎng)站
（2）關閉博客的標簽頁
（3）重新打開博客
（4）刷新
看到這里可能有人小伙伴問了，最后一個步驟刷新的時候炕吸，不是同時存在著from disk cache和from memory cache嗎伐憾？
對于這個問題，我們需要了解內(nèi)存緩存(from memory cache)和硬盤緩存(from disk cache)赫模，如下:
（1）內(nèi)存緩存(from memory cache)：內(nèi)存緩存具有兩個特點树肃，分別是快速讀取和時效性：
1、快速讀绕俾蕖：內(nèi)存緩存會將編譯解析后的文件胸嘴，直接存入該進程的內(nèi)存中，占據(jù)該進程一定的內(nèi)存資源斩祭，以方便下次運行使用時的快速讀取劣像。
2、時效性：一旦該進程關閉摧玫，則該進程的內(nèi)存則會清空驾讲。
（2）硬盤緩存(from disk cache)：硬盤緩存則是直接將緩存寫入硬盤文件中，讀取緩存需要對該緩存存放的硬盤文件進行I/O操作席赂，然后重新解析該緩存內(nèi)容吮铭，讀取復雜，速度比內(nèi)存緩存慢颅停。
在瀏覽器中谓晌，瀏覽器會在js和圖片等文件解析執(zhí)行后直接存入內(nèi)存緩存中，那么當刷新頁面時只需直接從內(nèi)存緩存中讀取(from memory cache)癞揉；而css文件則會存入硬盤文件中纸肉，所以每次渲染頁面都需要從硬盤讀取緩存(from disk cache)。
2.2協(xié)商緩存
協(xié)商緩存就是強制緩存失效后喊熟，瀏覽器攜帶緩存標識向服務器發(fā)起請求柏肪，由服務器根據(jù)緩存標識決定是否使用緩存的過程，主要有以下兩種情況：
（1）協(xié)商緩存生效芥牌，返回304烦味，如下
（2）協(xié)商緩存失敗，返回200和請求結(jié)果壁拉，如下
同樣谬俄，協(xié)商緩存的標識也是在響應報文的HTTP頭中和請求結(jié)果一起返回給瀏覽器的，控制協(xié)商緩存的字段分別有：Last-Modified / If-Modified-Since和Etag / If-None-Match弃理，其中Etag / If-None-Match的優(yōu)先級比Last-Modified / If-Modified-Since高溃论。
2.2.1Last-Modified / If-Modified-Since
（1）Last-Modified是服務器響應請求時，返回該資源文件在服務器最后被修改的時間痘昌，如下：
（2）If-Modified-Since則是客戶端再次發(fā)起該請求時钥勋，攜帶上次請求返回的Last-Modified值炬转，通過此字段值告訴服務器該資源上次請求返回的最后被修改時間。服務器收到該請求算灸，發(fā)現(xiàn)請求頭含有If-Modified-Since字段返吻，則會根據(jù)If-Modified-Since的字段值與該資源在服務器的最后被修改時間做對比，若服務器的資源最后被修改時間大于If-Modified-Since的字段值乎婿，則重新返回資源测僵，狀態(tài)碼為200；否則則返回304谢翎，代表資源無更新捍靠，可繼續(xù)使用緩存文件，如下森逮。
2.2.2Etag / If-None-Match
（1）Etag是服務器響應請求時榨婆，返回當前資源文件的一個唯一標識(由服務器生成)，如下：
（2）If-None-Match是客戶端再次發(fā)起該請求時褒侧，攜帶上次請求返回的唯一標識Etag值良风，通過此字段值告訴服務器該資源上次請求返回的唯一標識值。服務器收到該請求后闷供，發(fā)現(xiàn)該請求頭中含有If-None-Match烟央，則會根據(jù)If-None-Match的字段值與該資源在服務器的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é)商緩存進行懒浮，若強制緩存(Expires和Cache-Control)生效則直接使用緩存飘弧，若不生效則進行協(xié)商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協(xié)商緩存由服務器決定是否使用緩存嵌溢，若協(xié)商緩存失效眯牧，那么代表該請求的緩存失效，重新獲取請求結(jié)果赖草，再存入瀏覽器緩存中；生效則返回304剪个，繼續(xù)使用緩存秧骑，主要過程如下：
以上便是瀏覽器緩存的過程
文中有錯誤的地方希望指出，共同進步
