詳解瀏覽器緩存

緩存有利於加快網頁的載入速度, 能夠被反覆利用, 減少流量和帶寬的開銷。前端開發中緩存的分類其實是有很多種的，有CDN緩存、資料庫緩存、代理伺服器緩存和瀏覽器緩存等等，本文所講的是瀏覽器緩存，也就是瀏覽器向伺服器請求資源時的瀏覽器對資源進行的緩存。

在說緩存之前，先來說一下本文中的資源是什麼。資源就是瀏覽器向伺服器端請求來的信息，可以是文件，也可以其他格式的數據(JSON等 )，當然，瀏覽器對資源的緩存都是文件的，所以狹義上來講資源就是瀏覽器向伺服器請求的文件。而瀏覽器資源又可以分為主資源和派生資源，主資源就是指請求的主資源，如進入一個url時請求的html網頁，瀏覽器下載文件時請求的文件，而其他的如html網頁中嵌入請求的js腳本、img、css文件都屬於派生資源。

瀏覽器緩存是只對派生資源進行緩存的，主資源一定不會進行緩存。如下圖，再怎麼刷新頁面，百度的html網頁是一定不會緩存的。所以我們下面討論的瀏覽器緩存的策略都是指派生資源的緩存。

對於派生資源的緩存，瀏覽器是遵循著下圖的處理邏輯：

瀏覽器在進行請求之前，會對資源進行判斷，看本地是否有緩存，如果沒有緩存會正常進行請求，如果有緩存則會進行緩存策略的處理。

1.判斷本地的緩存是否過期，

如果過期或者不存在Cache-Control和Expires，進入下一步，

如果未過期，直接從緩存讀取資源，狀態碼為200。

怎麼判斷緩存是否過期呢，

首先要看之前緩存中的http響應頭中的Cache-Control和Date，

Cache-Control中的max-age，這個代表了有效期長度的時間戳，Date代表的資源的生成時間，所以只要將兩個相加和當前的時間戳一對比就能看出來是否過期了。

如果沒有Cache-Control則要看Expires這個欄位，Expires的值就是過期時間，和max-age + Date的邏輯是一樣的，只不過Cache-Control的優先順序更高，兩者都存在的話以Cache-Control為準。

2.如果資源已經過期，對緩存的響應頭Etag進行判斷，

如果存在Etag，則會向伺服器發送帶有If-None-Match請求頭的請求，由瀏覽器來判斷資源是否過期，

如果Etag與服務端資源的Etag不同，代表資源已過期，伺服器會返回新的資源，狀態碼為200，

如果Etag與服務端資源的Etag相同，代表資源未過期，伺服器會只返回一個響應頭，狀態碼為304，瀏覽器再從緩存讀取資源。

這裡需要解釋一下Etag，Etag(Entitytag )就是資源對應的一個hash值，由服務端生成，可以理解為類似於資源的版本號之類的東西。

3.如果緩存不存在Etag，那麼判斷緩存是否存在Last-Modified( 最近更新時間 )，

如果Last-Modified也不存在的話瀏覽器會直接向伺服器請求新的資源，此時返回的狀態碼為200。

如果存在那麼瀏覽器會向伺服器發送一個帶有If-Modified-Since的請求頭，

這時伺服器根據Last-Modified是否和服務端保持一致來判斷資源是否更新，

如果一致就返回一個響應頭，狀態碼為304，瀏覽器直接從緩存去除資源，

如果不一致伺服器會返回新的資源，狀態碼為200。

這一塊需要說一下，如果一個請求的響應頭中存在Expires和Cache-Control，那麼稱之為強制緩存，因為緩存只要沒過期就不會發送http請求，如果不存在則稱之為對比緩存，因為是需要伺服器來判斷是否使用瀏覽器緩存。

至此，全流程走完，上述的流程解釋需要圖文結合來看。

另外，還有一塊需要說的就是瀏覽器從本地取緩存這一塊，實際上可以分為memory cache和disk cache的。

正如字面的意思，前者為內存緩存，後者為磁碟緩存，瀏覽器在取緩存時會先在內存中查找，如果內存中有直接從內存中取緩存，內存中沒有的再去從磁碟中取，體現在chrome調試工具中就是from memory cache和from disk cache。

二者之間雖然類似，但還是有區別的，從內存中取緩存是不耗時的，從磁碟中取緩存是有讀取硬碟的動作，所以還是需要消耗一定時間的，雖然很短但仍然不能夠忽略。

如果先關閉瀏覽器，再重新打開一個網頁，這是瀏覽器取出的緩存一定是磁碟緩存( 如下圖，清一色的磁碟緩存 )，至於什麼樣的資源會在瀏覽器的內存中進行緩存，我想應該是與瀏覽器內部的機制相關，從個人的經驗來看img一般來說是內存緩存，css一般來說是磁碟緩存，而js文件則二者都有。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！