瀏覽器緩存

1. 緩存過程

   瀏覽器每次發起請求時，先在瀏覽器緩存中查找該請求的結果和緩存標誌，根據查找結果決定是否向服務器發送請求。瀏覽器獲取請求結果後，根據響應報文中 HTTP 頭的緩存標識決定是否緩存請求結果。

2. 緩存類型

   有兩種，強制緩存和協商緩存。

3. 什麼是強制緩存？

   強制緩存就是在瀏覽器緩存中查找請求結果，並根據該結果的緩存規則來決定是否使用該緩存結果的過程。

   強制緩存的狀況主要有三種：

   1. 請求的緩存結果和緩存標識不存在，強制緩存失效，直接向服務器發送請求；
   2. 請求的緩存結果和緩存標識存在，但結果已失效，強制緩存失效，使用協商緩存；
   3. 請求的緩存結果和緩存標誌存在，且結果還沒有失效，強制緩存生效，直接返回緩存結果。

4. 強制緩存的緩存規則是什麼？

   控制強制請求的請求頭是Expires和Cache-Control，Cache-Control優先級比Expires高。

   • HTTP 1.0使用Expires控制網頁緩存，它的值爲服務器返回的請求結果緩存的到期時間，再次發送請求時，若是客戶端的時間小於Expires的值，就直接使用緩存結果。使用Expires存在客戶端與服務器時間可能有偏差的問題。

   • HTTP 1.1使用Cache-Control代替了Expires。Cache-Control能夠取如下值

     Cache-Control值	含義
     no-store	禁止對請求和響應內容進行緩存
     no-cache	強制確認緩存，每次都將請求發送給服務器，由服務器驗證請求中所描述的緩存是否過時，未過時就返回 304
     private	響應內容只有客戶端能夠緩存，代理服務器不能夠緩存，Cache-Control的默認值
     public	相應內容能夠被任何中間人（代理、CDN 等）緩存
     max-age	緩存內容將在設定的多少秒後失效

   Expires和Cache-Control同時存在時，只有Cache-Control生效。

5. 瀏覽器中如何判斷強制緩存是否生效？

   打開控制檯，選擇Network，在Size列查看，若是顯示灰色的from memory cache或者from disk cache表示使用了強緩存。

   • from memory cache表示使用內存中的緩存。內存緩存具備快速讀取和時效性兩個特色。
     • 快速讀取：內存緩存會將編譯解析後的文件，直接存入該進程的內存中，佔據該進程必定的內存資源，以方便下次快速讀取。
     • 時效性：一旦該進程關閉，則該進程的內存會清空。
   • from disk cache表示硬盤緩存。硬盤緩存將緩存寫入硬盤文件中，讀取緩存時須要對該緩存存放的硬盤文件進行 I/O 操做，而後從新解析緩存內容，讀取複雜，速度比內存緩存慢。

6. 什麼是協商緩存？

   協商緩存是指強制緩存失效後，瀏覽器攜帶緩存標識向服務器發起請求，服務器根據緩存標識決定是否使用緩存的過程。

   協商緩存主要有如下兩種狀況：

   1. 協商緩存生效，返回 304；

   2. 協商緩存失效，返回 200 和請求結果。

7. 協商緩存的規則是什麼？

   控制協商緩存的響應頭有Last-Modified和Etag，請求頭有If-Modified-Since和If-None-Match。Etag/If-None-Match這對頭部比Last-Modified/If-Modified-Since優先級高。

   頭部	含義
   Last-Modified（響應頭）	返回的資源文件在服務器最後被修改的時間
   If-Modified-Since（請求頭）	客戶端再次發起請求時，攜帶上次請求返回的Last-Modified值
   Etag（響應頭）	返回的資源文件的惟一標識（由服務器生成）
   If-None-Match（請求頭）	客戶端再次發起請求時，攜帶上次請求返回的Etag值

   • 服務器讀取到請求頭中的If-Modified-Since後，用該值與該資源在服務器的最後修改時間作對比，若是客戶端資源不是最新的，則從新返回資源，狀態碼爲 200；不然返回狀態碼 304，表示資源沒有更新。
   • 服務器讀取到請求頭中的If-None-Match字段後，用該值與該資源在服務器的最新Etag進行對比，一致就返回 304，表示資源沒有更新；不然從新返回資源文件，狀態碼爲200。

---

詳解：

1. 詳細的請求過程：

---

參考：

1. 【掘金】頁面性能優化辦法有哪些？juejin.im/post/5b022b…
2. 【掘金】完全理解瀏覽器的緩存機制：juejin.im/entry/5ad86…
3. 【MDN】HTTP緩存：developer.mozilla.org/zh-CN/docs/…