瀏覽器的緩存機制

目的

瀏覽器緩存（Browser Caching）是為了節約網絡的資源加速瀏覽，瀏覽器在用戶磁盤上對最近請求過的文檔進行存儲，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁面的閱覽。

簡單釋義

瀏覽器緩存其實就是瀏覽器保存通過HTTP獲取的所有資源,是瀏覽器將網絡資源存儲在本地的一種行為。瀏覽器的緩存機制是根據HTTP報文的緩存標識進行的。

種類

瀏覽器緩存主要有兩類：強制緩存：Expires，cache-control 和緩存協商：Last-modified ，Etag

強制緩存

Expires

response header里的過期時間，瀏覽器再次加載資源時，如果在這個過期時間內，則命中強制緩存。

Cache-Control

當值設為max-age=300時，則代表在這個請求正確返回時間（瀏覽器也會記錄下來）的5分鍾內再次加載資源，就會命中強緩存。

    

Expires和Cache-Control的區別

1. Expires 是http1.0的產物，Cache-Control是http1.1的產物
2. 兩者同時存在的話，Cache-Control優先級高於Expires；
3. 在某些不支持HTTP1.1的環境下，Expires就會發揮用處。所以Expires其實是過時的產物，現階段它的存在只是一種兼容性的寫法
4. Expires是一個具體的服務器時間，這就導致一個問題，如果客戶端時間和服務器時間相差較大，緩存命中與否就不是開發者所期望的。Cache-Control是一個時間段，控制就比較容易

協商緩存

ETag和If-None-Match

這兩個要一起說。Etag是上一次加載資源時，服務器返回的response header，是對該資源的一種唯一標識，只要資源有變化，Etag就會重新生成。瀏覽器在下一次加載資源向服務器發送請求時，會將上一次返回的Etag值放到request header里的If-None-Match里，服務器接受到If-None-Match的值后，會拿來跟該資源文件的Etag值做比較，如果相同，則表示資源文件沒有發生改變，命中協商緩存。

Last-Modified和If-Modified-Since

這兩個也要一起說。Last-Modified是該資源文件最后一次更改時間，服務器會在response header里返回，同時瀏覽器會將這個值保存起來，在下一次發送請求時，放到request header里的If-Modified-Since里，服務器在接收到后也會做比對，如果相同則命中協商緩存。

ETag和Last-Modified區別

1. 在方式上，Etag是對資源的一種唯一標識，而Last-Modified是該資源文件最后一次更改時間
2. 在精確度上，Etag要優於Last-Modified。Last-Modified的時間單位是秒，如果某個文件在1秒內改變了多次，那么他們的Last-Modified其實並沒有體現出來修改，但是Etag每次都會改變確保了精度；如果是負載均衡的服務器，各個服務器生成的Last-Modified也有可能不一致。
3. 在性能上，Etag要遜於Last-Modified，畢竟Last-Modified只需要記錄時間，而Etag需要服務器通過算法來計算出一個hash值。
4. 在優先級上，服務器校驗優先考慮Etag。

瀏覽器緩存過程

1. 瀏覽器第一次加載資源，服務器返回200，瀏覽器將資源文件從服務器上請求下載下來，並把response header及該請求的返回時間一並緩存；
2. 下一次加載資源時，先比較當前時間和上一次返回200時的時間差，如果沒有超過cache-control設置的max-age，則沒有過期，命中強緩存，不發請求直接從本地緩存讀取該文件（如果瀏覽器不支持HTTP1.1，則用expires判斷是否過期）；如果時間過期，則向服務器發送header帶有If-None-Match和If-Modified-Since的請求；
3. 服務器收到請求后，優先根據Etag的值判斷被請求的文件有沒有做修改，Etag值一致則沒有修改，命中協商緩存，返回304；如果不一致則有改動，直接返回新的資源文件帶上新的Etag值並返回200；
4. 如果服務器收到的請求沒有Etag值，則將If-Modified-Since和被請求文件的最后修改時間做比對，一致則命中協商緩存，返回304；不一致則返回新的last-modified和文件並返回200；

用戶行為對瀏覽器緩存的控制

1. 地址欄訪問，鏈接跳轉是正常用戶行為，將會觸發瀏覽器緩存機制；
2. F5刷新，瀏覽器會設置max-age=0，跳過強緩存判斷，會進行協商緩存判斷；
3. ctrl+F5刷新，跳過強緩存和協商緩存，直接從服務器拉取資源。

 

問題

瀏覽器的緩存存放在哪里，如何在瀏覽器中判斷強制緩存是否生效？

判斷是否命中強制緩存：當命中強制緩存時，狀態碼為200, 請求對應的Size值則代表該緩存存放的位置，分別為from memory cache 和 from disk cache。

from memory cache代表使用內存中的緩存，from disk cache則代表使用的是硬盤中的緩存，瀏覽器讀取緩存的順序為memory > disk。

1.內存緩存(from memory cache)：內存緩存具有兩個特點，分別是快速讀取和時效性：

快速讀取：內存緩存會將編譯解析后的文件，直接存入該進程的內存中，占據該進程一定的內存資源，以方便下次運行使用時的快速讀取。

時效性：一旦該進程關閉，則該進程的內存則會清空。

2.硬盤緩存(from disk cache)：硬盤緩存則是直接將緩存寫入硬盤文件中，讀取緩存需要對該緩存存放的硬盤文件進行I/O操作，然后重新解析該緩存內容，讀取復雜，速度比內存緩存慢。退出進程不會清空。

一般JS,字體，圖片等會放在內存中，而CSS則會放在硬盤緩存中

為什么CSS會放在硬盤緩存中？

因為CSS文件加載一次就可渲染出來,我們不會頻繁讀取它,所以它不適合緩存到內存中,但是js之類的腳本卻隨時可能會執行,如果腳本在磁盤當中,我們在執行腳本的時候需要從磁盤取到內存中來,這樣IO開銷就很大了,有可能導致瀏覽器失去響應。

三級緩存原理 (訪問緩存優先級)

1. 先在內存中查找,如果有,直接加載。
2. 如果內存中不存在,則在硬盤中查找,如果有直接加載。
3. 如果硬盤中也沒有,那么就進行網絡請求。
4. 請求獲取的資源緩存到硬盤和內存。

 

參考資料

https://zhuanlan.zhihu.com/p/25953524

https://www.jianshu.com/p/54cc04190252

https://segmentfault.com/a/1190000017962411

https://www.cnblogs.com/chengxs/p/10396066.html