由memoryCache和diskCache產生的瀏覽器緩存機制的思考

今天在作項目的優化的時候，使用chrome開發者工具的network發現了細節：

雖然這兩個看起來都是從緩存中讀取，但仍是有一些不同的！

webkit資源的分類

webkit的資源分類主要分爲兩大類：主資源和派生資源

http狀態碼

200 from memory cache

不訪問服務器，直接讀緩存，從內存中讀取緩存。此時的數據時緩存到內存中的，當kill進程後，也就是瀏覽器關閉之後，數據將不存在。

可是這種方式只能緩存派生資源。

200 from disk cache

不訪問服務器，直接讀緩存，從磁盤中讀取緩存，當kill進程時，數據仍是存在。

這種方式也只能緩存派生資源

304 Not Modified

訪問服務器，發現數據沒有
更新，服務器返回此狀態碼。而後從緩存中讀取數據。

可是這裏有困惑，怎麼判斷from memory cache仍是304

三級緩存原理

1. 先去內存看，若是有，直接加載
2. 若是內存沒有，擇取硬盤獲取，若是有直接加載
3. 若是硬盤也沒有，那麼就進行網絡請求
4. 加載到的資源緩存到硬盤和內存

因此咱們能夠來解釋這個現象

圖片爲例：

訪問-> 200 -> 退出瀏覽器
再進來-> 200(from disk cache) -> 刷新 -> 200(from memory cache)

http header

max-age

web中的文件被用戶訪問(請求)後的存活時間,是個相對的值,相對Request_time(請求時間)

Expires

Expires指定的時間根據服務器配置可能有兩種：

1. 文件最後訪問時間
2. 文件絕對修改時間

若是max-age和Expires同時存在，則被Cache-Control的max-age覆蓋

last-modified

WEB 服務器認爲對象的最後修改時間，好比文件的最後修改時間，動態頁面的最後產生時間

ETag

對象（好比URL）的標誌值，就一個對象而言，文件被修改，Etag也會修改

Cache-Control

簡單理解，強緩存

最後結論

見圖片（來源自網絡）