緩存機(jī)制
基本參考： 徹底理解瀏覽器的緩存機(jī)制
- 瀏覽器第一次向服務(wù)器發(fā)起該請求后拿到請求結(jié)果，根據(jù)響應(yīng)報(bào)文中HTTP頭的緩存標(biāo)識(shí)，決定是否緩存結(jié)果，是則將請求結(jié)果和緩存標(biāo)識(shí)存入瀏覽器緩存中
- 之后瀏覽器每次發(fā)起請求，都會(huì)先在瀏覽器緩存中查找該請求的結(jié)果以及緩存標(biāo)識(shí)，如果有的話，則直接使用瀏覽器緩存，沒有的話，則會(huì)向服務(wù)端發(fā)送請求
- 瀏覽器每次拿到返回的請求結(jié)果，都會(huì)將該結(jié)果和緩存標(biāo)識(shí)存入瀏覽器緩存中
瀏覽器是否需要向服務(wù)端重新發(fā)起HTTP請求，以此為依據(jù)，分為強(qiáng)制請求和協(xié)商請求
強(qiáng)制緩存
強(qiáng)制緩存就是向?yàn)g覽器緩存查找該請求結(jié)果，并根據(jù)該結(jié)果的緩存規(guī)則來決定是否使用該緩存結(jié)果的過程
是否采用強(qiáng)制緩存，有以下幾種情況
-
不存在該緩存結(jié)果和緩存標(biāo)識(shí)，強(qiáng)制緩存失效，則直接向服務(wù)器發(fā)起請求（跟第一次發(fā)起請求一致），如下圖：
-
存在該緩存結(jié)果和緩存標(biāo)識(shí)，但該結(jié)果已失效，強(qiáng)制緩存失效，則使用協(xié)商緩存(見下文)，如下圖
-
存在該緩存結(jié)果和緩存標(biāo)識(shí)，且該結(jié)果尚未失效，強(qiáng)制緩存生效，直接返回該結(jié)果，如下圖
是否強(qiáng)制請求，取決于HTTP響應(yīng)報(bào)文Expires和Cache-Control
Cache-Control優(yōu)先級(jí)高于Expires
Expires
具體鏈接：Expires(MDN)
其值為服務(wù)器返回該請求結(jié)果緩存的到期時(shí)間，即再次發(fā)起該請求時(shí)，如果客戶端的時(shí)間小于Expires的值時(shí)，直接使用緩存結(jié)果。
Cache-Control
- public：表明響應(yīng)可以被任何對象（包括：發(fā)送請求的客戶端，代理服務(wù)器，等等）緩存。
- private：表明響應(yīng)只能被單個(gè)用戶緩存，不能作為共享緩存（即代理服務(wù)器不能緩存它）,可以緩存響應(yīng)內(nèi)容。
- no-cache：可以在本地緩存，可以在代理服務(wù)器緩存，但是這個(gè)緩存要服務(wù)器驗(yàn)證才可以使用。
- no-store：所有內(nèi)容都不會(huì)被緩存，即不使用強(qiáng)制緩存，也不使用協(xié)商緩存
- max-age=xxx (xxx is numeric)：緩存內(nèi)容將在xxx秒后失效
內(nèi)存緩存(from memory cache)和硬盤緩存(from disk cache)
強(qiáng)制緩存中的圖片存放在內(nèi)存緩存、硬盤緩存中
-
內(nèi)存緩存(from memory cache)：內(nèi)存緩存具有兩個(gè)特點(diǎn)，分別是快速讀取和時(shí)效性：
- 快速讀取：內(nèi)存緩存會(huì)將編譯解析后的文件，直接存入該進(jìn)程的內(nèi)存中，占據(jù)該進(jìn)程一定的內(nèi)存資源，以方便下次運(yùn)行使用時(shí)的快速讀取。
- 時(shí)效性：一旦該進(jìn)程關(guān)閉，則該進(jìn)程的內(nèi)存則會(huì)清空。
- 硬盤緩存(from disk cache)：硬盤緩存則是直接將緩存寫入硬盤文件中，讀取緩存需要對該緩存存放的硬盤文件進(jìn)行I/O操作，然后重新解析該緩存內(nèi)容，讀取復(fù)雜，速度比內(nèi)存緩存慢。
-
實(shí)例
在瀏覽器中，具體存內(nèi)存呢，還是硬盤，好像每次都不一樣;
以百度為例，打開界面后，按F5刷新，部分資源來源于memory，部分資源來源于disk，且來源于memory的資源加載快，都是0ms，從disk的加載速度也快于重新從服務(wù)端獲取到的數(shù)據(jù)；
但關(guān)閉窗口后，重新再打開，則緩存資源都來源于disk（memory在窗口關(guān)閉都，就會(huì)被清空）
協(xié)商緩存
協(xié)商緩存就是強(qiáng)制緩存失效后，瀏覽器攜帶緩存標(biāo)識(shí)向服務(wù)器發(fā)起請求，由服務(wù)器根據(jù)緩存標(biāo)識(shí)決定是否使用緩存的過程，主要有以下兩種情況：
-
協(xié)商緩存生效，返回304，如下
-
協(xié)商緩存失效，返回200和請求結(jié)果結(jié)果，如下
控制協(xié)商緩存的響應(yīng)報(bào)文的HTTP頭中的字段有：Last-Modified / If-Modified-Since和Etag / If-None-Match
Etag / If-None-Match的優(yōu)先級(jí)比Last-Modified / If-Modified-Since高，同時(shí)存在，則只有Etag / If-None-Match生效
Last-Modified / If-Modified-Since
-
Last-Modified
是服務(wù)器響應(yīng)請求時(shí)，返回該資源文件在服務(wù)器最后被修改的時(shí)間，如下。
-
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ù)使用緩存文件，如下。
Etag / If-None-Match
-
Etag
具體： Etag(MDN)
服務(wù)器響應(yīng)請求時(shí)，返回當(dāng)前資源文件的一個(gè)唯一標(biāo)識(shí)(由服務(wù)器生成)，如下。
當(dāng)資源更新后，對應(yīng)的etag值也會(huì)被更新。
-
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，如下
image.png
總結(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ù)使用緩存，主要過程如下：
還有些比較好的文章
徹底理解瀏覽器的緩存機(jī)制
HTTP緩存機(jī)制(200還是304)
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching_FAQ
https://www.telerik.com/blogs/understanding-http-304-responses
https://blog.csdn.net/soonfly/article/details/50953814
淺聊HTTP緩存 (HTTP Cache)
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching?hl=zh-cn
