文章目錄

• 前言
• 一、瀏覽器Network的Size列
• 二、三級緩存原理
• 三、HTTP狀態碼及區別
• 四、不同瀏覽器資源加載策略

前言

在Chrome開發者工具頁面中,有Network一欄，如下圖所示：

一、瀏覽器Network的Size列

在瀏覽器開發者工具的Network的Size列會出現的三種情況：

• from memory cache
• from disk cache
• 資源本身大小（比如：13.6K）

二、三級緩存原理

先查找內存，如果內存中存在，從內存中加載；

如果內存中未查找到，選擇硬盤獲取，如果硬盤中有，從硬盤中加載；

如果硬盤中未查找到，那就進行網絡請求；

加載到的資源緩存到硬盤和內存；

三、HTTP狀態碼及區別

• 200 from memory cache

  不訪問服務器，一般已經加載過該資源且緩存在了內存當中，直接從內存中讀取緩存。瀏覽器關閉后，數據將不存在（資源被釋放掉了），再次打開相同的頁面時，不會出現from memory cache。

• 200 from disk cache

  不訪問服務器，已經在之前的某個時間加載過該資源，直接從硬盤中讀取緩存，關閉瀏覽器后，數據依然存在，此資源不會隨著該頁面的關閉而釋放掉下次打開仍然會是from disk cache。

• 200 大小(如3.4k)

  訪問服務器，size顯示為實際資源的大小

• 304 Not Modified

  訪問服務器，發現數據沒有更新，服務器返回此狀態碼。然后從緩存中讀取數據。這種在請求頭中有兩個請求參數：If-Modified-Since 和 If-None-Match。304詳解見：https://blog.csdn.net/franknotbad/article/details/79399809

  狀態碼類型說明

  200	from memory cache	不請求網絡資源，資源在內存當中
  200	from disk cache	不請求網絡資源，在磁盤當中
  200	資源大小數值	從服務器下載最新資源
  304	報文大小	請求服務端發現資源沒有更新，使用本地資源

以上是chrome在請求資源是最常見的兩種http狀態碼，由此可見樣式表一般在磁盤中，不會緩存到內存中去，因為css樣式加載一次即可渲染出網頁。但是腳本卻可能隨時會執行，如果腳本在磁盤當中，在執行該腳本需要從磁盤中取到內存當中來，這樣的IO開銷是比較大的，有可能會導致瀏覽器失去響應。

四、不同瀏覽器資源加載策略

以上的數據及統計都是在chrome瀏覽器下進行的，在Firefox下并沒有from memory cache以及from disk cache的狀態展現，相同的資源在chrome下是from disk/memory cache，但是Firefox統統是304狀態碼，即Firefox下會緩存資源，但是每次都會請求服務器對比當前緩存是否更改，chrome一般不直接請求服務器(當請求頭中包含參數If-Modified-Since 和 If-None-Match時，會請求服務器進行資源版本比對)，直接拿過來用，這也是為啥chrome比較快的原因之一

參考鏈接：
https://www.jianshu.com/p/8332da83955d
https://blog.csdn.net/lianxin19900610/article/details/82417233

總結

以上是生活随笔為你收集整理的Chrome中的from memory cache与from disk cache的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。