瀏覽器緩存機制

1.爲何要使用瀏覽器緩存

　　1.1減小網絡請求

　　1.2加快瀏覽器響應時間

解釋：在用戶瀏覽網絡的時候，同一個域名下的網頁大部分是有不少共同文件的，好比第三方js文件，css文件，因此咱們不可能當用戶每瀏覽一個網頁或者刷新同一個網頁時，全部文件都從新請求，那樣的頁面加載時間將會大大延長，用戶體驗也至關很差。

瀏覽器是如何緩存的呢？

話很少說，先上一個思惟導圖。 

2.緩存位置

從緩存位置上來講一共有四種，且各自有優先級，查找緩存時會依次查找，當都沒有找到時，纔會去請求網絡。

• Service Worker
• Memory Cache
• Disk Cache
• Push Cache

2.1Service Worker

　Service Worker 是運行在瀏覽器背後的獨立線程，通常能夠用來實現緩存功能。使用 　　Service Worker的話，傳輸協議必須爲 HTTPS。由於 Service Worker 中涉及到請求攔截，因此必須使用 HTTPS 協議來保障安全。Service Worker 的緩存與瀏覽器其餘內建的緩存機制不一樣，它可讓咱們自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存，而且緩存是持續性的。

至於Service Worker實現緩存功能的步驟能夠直接看圖：

　

步驟分爲如下部分：

• register 這個是由 client 端發起，註冊一個 serviceWorker，這須要一個專門的 sw 處理文件
• install 註冊成功後，此時 sw 中會觸發 install 事件， 需知 sw 中都是事件觸發的方式進行的邏輯調用
• activate 安裝後要等待激活，也就是 activated 事件，只要 register 成功後就會觸發 install ，但不會當即觸發 activated，這個稍後再說
• idle 在 activated 以後就能夠開始對 client 的請求進行攔截處理，sw 發起請求用的是 fetch api
• terminate 這一步是瀏覽器自身的判斷處理，當 sw 長時間不用以後，處於閒置狀態，瀏覽器會把該 sw 暫停，直到再次使

Service Worker詳解見 深刻理解service worker

3.Memory Cache

Memory Cache 也就是內存中的緩存，主要包含的是當前中頁面中已經抓取到的資源,例如頁面上已經下載的樣式、腳本、圖片等。讀取內存中的數據確定比磁盤快,內存緩存雖然讀取高效，但是緩存持續性很短，會隨着進程的釋放而釋放。 一旦咱們關閉 Tab 頁面，內存中的緩存也就被釋放了。

那麼既然內存緩存這麼高效，咱們是否是能讓數據都存放在內存中呢？
這是不可能的。計算機中的內存必定比硬盤容量小得多，操做系統須要精打細算內存的使用，因此能讓咱們使用的內存必然很少。

當咱們訪問過頁面之後，再次刷新頁面，能夠發現不少數據都來自於內存緩存

須要注意的事情是，內存緩存在緩存資源時並不關心返回資源的HTTP緩存頭Cache-Control是什麼值，同時資源的匹配也並不是僅僅是對URL作匹配，還可能會對Content-Type，CORS等其餘特徵作校驗

4.Disk Cache

Disk Cache 也就是存儲在硬盤中的緩存，讀取速度慢點，可是什麼都能存儲到磁盤中，比之 Memory Cache 勝在容量和存儲時效性上。

在全部瀏覽器緩存中，Disk Cache 覆蓋面基本是最大的。它會根據 HTTP Herder 中的字段判斷哪些資源須要緩存，哪些資源能夠不請求直接使用，哪些資源已通過期須要從新請求。而且即便在跨站點的狀況下，相同地址的資源一旦被硬盤緩存下來，就不會再次去請求數據。絕大部分的緩存都來自 Disk Cache，關於 HTTP 的協議頭中的緩存字段，咱們會在下文進行詳細介紹。

5.Push Cache

Push Cache（推送緩存）是 HTTP/2 中的內容，當以上三種緩存都沒有命中時，它纔會被使用。它只在會話（Session）中存在，一旦會話結束就被釋放，而且緩存時間也很短暫，在Chrome瀏覽器中只有5分鐘左右，同時它也並不是嚴格執行HTTP頭中的緩存指令。

Push Cache 在國內可以查到的資料不多，也是由於 HTTP/2 在國內不夠普及。這裏推薦閱讀Jake Archibald的 HTTP/2 push is tougher than I thought 這篇文章，文章中的幾個結論：

• 全部的資源都能被推送，而且可以被緩存,可是 Edge 和 Safari 瀏覽器支持相對比較差
• 能夠推送 no-cache 和 no-store 的資源
• 一旦鏈接被關閉，Push Cache 就被釋放
• 多個頁面可使用同一個HTTP/2的鏈接，也就可使用同一個Push Cache。這主要仍是依賴瀏覽器的實現而定，出於對性能的考慮，有的瀏覽器會對相同域名但不一樣的tab標籤使用同一個HTTP鏈接。
• Push Cache 中的緩存只能被使用一次
• 瀏覽器能夠拒絕接受已經存在的資源推送
• 你能夠給其餘域

  3、緩存過程分析

  瀏覽器與服務器通訊的方式爲應答模式，便是：瀏覽器發起HTTP請求 – 服務器響應該請求，那麼瀏覽器怎麼肯定一個資源該不應緩存，如何去緩存呢？瀏覽器第一次向服務器發起該請求後拿到請求結果後，將請求結果和緩存標識存入瀏覽器緩存，瀏覽器對於緩存的處理是根據第一次請求資源時返回的響應頭來肯定的。具體過程以下圖：

   

   

  第一次發起HTTP請求

  由上圖咱們能夠知道：

  • 瀏覽器每次發起請求，都會先在瀏覽器緩存中查找該請求的結果以及緩存標識

  • 瀏覽器每次拿到返回的請求結果都會將該結果和緩存標識存入瀏覽器緩存中

  以上兩點結論就是瀏覽器緩存機制的關鍵，它確保了每一個請求的緩存存入與讀取，只要咱們再理解瀏覽器緩存的使用規則，那麼全部的問題就迎刃而解了，本文也將圍繞着這點進行詳細分析。爲了方便你們理解，這裏咱們根據是否須要向服務器從新發起HTTP請求將緩存過程分爲兩個部分，分別是強緩存和協商緩存。

 

原文出處：https://www.cnblogs.com/liutianzeng/p/11294955.html