文章目錄
- 概述
- 強制緩存
- 協商緩存
- 總結
- 參考文章
概述
瀏覽器的緩存機制也就是我們說的HTTP緩存機制，其機制是根據HTTP報文的緩存標識進行的
瀏覽器第一次向服務器發送HTTP請求, 瀏覽器拿到請求結果后，會根據響應報文的緩存標識，決定是否進行緩存。
我們可以看出
- 瀏覽器每次發送請求，都會先在瀏覽器中查找該請求的結果以及緩存標識
- 瀏覽器每次拿到結果都會將該結果和緩存標識存入瀏覽器緩存之中
我們根據是否向服務端再次發起HTTP請求和緩存過程分為兩個部分，分別是強制緩存和協商緩存
我們先做一下簡單解釋：
- 🌊強制緩存就是向瀏覽器緩存查找結果，并根據該結果的緩存規則來決定是否使用該緩存的結果
- 🌊協商緩存就是強制緩存失效后，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存的過程
強制緩存
場景
- 不存在該緩存結果和緩存標識，強制緩存失效，則直接向服務器發起請求（跟第一次發起請求一致）
- 存在該緩存結果和緩存標識，但該結果已失效，強制緩存失效
- 存在該緩存結果和緩存標識，且該結果尚未失效，強制緩存生效
注意：場景在總結圖中有體現
相關字段
- Expires
Expires是HTTP/1.0控制網頁緩存的字段，其值為服務器返回該請求結果緩存的到期時間，即再次發起該請求時，如果客戶端的時間小于Expires的值時，直接使用緩存結果 - Cache-Control
在HTTP/1.1中，Cache-Control是最重要的規則，主要用于控制網頁緩存，主要取值為
- public：所有內容都將被緩存（客戶端和代理服務器都可緩存）
- private：所有內容只有客戶端可以緩存，Cache-Control的默認取值
- no-cache：客戶端緩存內容，但是是否使用緩存則需要經過協商緩存來驗證決定
- no-store：所有內容都不會被緩存，即不使用強制緩存，也不使用協商緩存
- max-age=xxx (xxx is numeric)：緩存內容將在xxx秒后失效
拓展：內容緩存
我們需要了解內存緩存(from memory cache)和硬盤緩存(from disk cache)，如下:
- 內存緩存(from memory cache)：內存緩存具有兩個特點，分別是快速讀取和時效性：
- 快速讀取：內存緩存會將編譯解析后的文件，直接存入該進程的內存中，占據該進程一定的內存資源，以方便下次運行使用時的快速讀取。
- 時效性：一旦該進程關閉，則該進程的內存則會清空。
- 硬盤緩存(from disk cache)：硬盤緩存則是直接將緩存寫入硬盤文件中，讀取緩存需要對該緩存存放的硬盤文件進行I/O操作，然后重新解析該緩存內容，讀取復雜，速度比內存緩存慢。
在瀏覽器中，瀏覽器會在js和圖片等文件解析執行后直接存入內存緩存中，那么當刷新頁面時只需直接從內存緩存中讀取(from memory cache)；而css文件則會存入硬盤文件中，所以每次渲染頁面都需要從硬盤讀取緩存(from disk cache)。
協商緩存
協商緩存失效，返回304
場景
- 協商緩存生效，返回304
發送請求，瀏覽器緩存失效，會再向服務端發送請求，服務端進行返回結果，將請求結果和緩存標識存入瀏覽器中 - 協商緩存失效，返回200和請求結果結果
與上面不同的是，服務端發現該資源沒有變化，返回304，會繼續向瀏覽器緩存獲取結果（怎么發現該資源是否有變化，可以參考下面的相關字段Etag / If-None-Match）
注意：場景在總結圖中有體現
相關字段
- Last-Modified / If-Modified-Since
Last-Modified是服務器響應請求時，返回該資源文件在服務器最后被修改的時間 - Etag / If-None-Match
Etag是服務器響應請求時，返回當前資源文件的一個唯一標識
If-None-Match是客戶端再次發起該請求時，攜帶上次請求返回的唯一標識Etag值，通過此字段值告訴服務器該資源上次請求返回的唯一標識值。服務器收到該請求后，發現該請求頭中含有If-None-Match，則會根據If-None-Match的字段值與該資源在服務器的Etag值做對比，一致則返回304，代表資源無更新，繼續使用緩存文件；不一致則重新返回資源文件，狀態碼為200
總結
強制緩存優先于協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定是否使用緩存，若協商緩存失效，那么代表該請求的緩存失效，重新獲取請求結果，再存入瀏覽器緩存中；生效則返回304，繼續使用緩存
參考文章
徹底理解瀏覽器的緩存機制
通知)
