理解瀏覽器的緩存機制

一、緩存位置

緩存位置分爲Service Worker 、M
emory Cache、Disk Cache 和Push Cache 四種,他們都有優先級,當依次查找緩存都沒有找到的時候,纔會去請求服務器。

1、Service Worker

Service Worker是運行在瀏覽器背後的獨立線程,一般可以用來實現緩存的功能。如果使用Service Worker的話,傳輸協議必須是HTTPS,因爲Service Worker中涉及到請求攔截,所以必須用HTTPS協議來保障安全。
Service Worker的緩存與瀏覽器其他內建的緩存機制不同,它可以讓我們自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存,並且魂村是持續性的。
實現Service Worker緩存功能:
1:首先註冊Service Worker
2:然後監聽到install事件
3:緩存需要的文件
完成以上三個步驟,就可以在下次用戶訪問的時候,通過攔截請求的方式查詢是否存在緩存,存在緩存的話就可以直接讀取緩存文件,否則就去請求數據。

2、Memory Cache

Memory Cache 是內存中的緩存,主要包含的時候當前頁面中已經抓取到的資源,例如頁面上已經下載的樣式、腳本、圖片等。讀取內存中的數據肯定比磁盤快,內存緩存雖然讀取高效,科室緩存持續性很短,會碎這金城的釋放而釋放、一旦關閉Tab頁面,內存中的緩存也就被釋放了。
內存緩存在緩存資源並不關心返回資源的HTTP緩存頭Cache-Control是什麼值,同時資源的匹配也並非僅僅是對URL做匹配,還可能對Content-type,CORS等其他特徵做校驗。

3、Disk Cache

Disk Cache 是存儲在硬盤中的緩存,讀取速度慢,但是什麼都能存儲在磁盤中,容量和存儲失效上比Memory Cache好。
也是所有瀏覽器緩存中覆蓋面最大的,它會根據HTTP Herder 中的字段判斷哪些資源需要存儲,哪些資源可以不請求直接使用,哪些資源已經過期需要重新請求。在誇站點的情況下,相同地址的資源一旦被硬盤緩存下來,就不會再次去請求數據。絕大部分的緩存都來自Disk Cache。
瀏覽器會把哪些文件放入內存中,哪些文件放入硬盤中呢?
1、對於大文件來說,大概率是不存儲在內存中的,反之優先
2、當前系統內存使用率高的話,文件優先存儲於硬盤中

4、Push Cache(推送緩存)

Push Cach是HTTP/2中的內容,當以上三種緩存都沒被命中的時候纔會被使用。**它只在會話中存在,一旦會話結束就被釋放,並且緩存時間也很短暫,**在chrome瀏覽器中只有5分鐘左右,同時她也並非嚴格執行HTTP頭中的緩存指令。

二、緩存過程分析

瀏覽器怎麼確定一個資源該不該緩存,如何去緩存呢?
答:瀏覽器第一次向服務器發起該請求後拿到請求結果後,將請求結構和緩存標識存入瀏覽器緩存,瀏覽器對於緩存的處理是根據第一次請求資源時返回的響應頭來確定的。

在這裏插入圖片描述

三、緩存機制

強緩存優先於協商緩存,若強緩存生效則世界使用緩存,若不生效則進行協商緩存,協商緩存由服務器決定是否使用緩存,若協商緩存失效,那麼代表該請求的緩存失效,返回200,重新返回資源和緩存標識,再存入瀏覽器緩存中;生效則返回304,繼續使用緩存。
在這裏插入圖片描述
如果緩存策略都沒設置,瀏覽器怎麼處理?
對於這種情況,瀏覽器會採用一個啓發式的算法,通常會取響應頭中的Date減去Last-Modified的值10%作爲緩存時間。

四、實際場景應用緩存策略

1、頻繁變動的資源:首先需要使用Cache-Control:no-cache 使瀏覽器每次都請求服務器,然後配合ETag或者Last-Modified 來驗證資源是否有效。這樣的做法雖然補鞥呢節省請求數量,但是能顯著減少響應數據大小。
2、不常變的資源:給它們的 Cache-Control 配置一個很大的 max-age=31536000 (一年),這樣瀏覽器之後請求相同的 URL 會命中強制緩存。而爲了解決更新的問題,就需要在文件名(或者路徑)中添加 hash, 版本號等動態字符,之後更改動態字符,從而達到更改引用 URL 的目的,讓之前的強制緩存失效 (其實並未立即失效,只是不再使用了而已)

五、用戶行爲對瀏覽器緩存的影響

1、打開網頁,地址欄輸入地址:查找disk cache 中是否有匹配的,如果有就是用,如果沒有就請求網絡
2、普通刷新:因爲tab頁面沒有關閉,因此memory caache是可以用的,會被優先使用,其次纔是disk cache.
3、強制刷新(ctrl+F5):瀏覽器不使用緩存,因此發送請求頭部帶有Cache-control: no-cache,服務器直接返回200和最新的內容。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章