如何高效的利用緩存加速頁面訪問速度，和頁面效果實時性

?

緩存可以說是性能優化中簡單高效的一種優化方式了。一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，并且由于緩存文件可以重復利用，還可以減少帶寬，降低網絡負荷。

對于一個數據請求來說，可以分為發起網絡請求、后端處理、瀏覽器響應三個步驟。瀏覽器緩存可以幫助我們在第一和第三步驟中優化性能。比如說直接使用緩存而不發起請求，或者發起了請求但后端存儲的數據和前端一致，那么就沒有必要再將數據回傳回來，這樣就減少了響應數據。

接下來的內容中我們將通過緩存位置、緩存策略以及實際場景應用緩存策略來探討瀏覽器緩存機制。

?

緩存位置

從緩存位置上來說分為四種，并且各自有優先級，當依次查找緩存且都沒有命中的時候，才會去請求網絡。

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

?

1.Service Worker

Service Worker 是運行在瀏覽器背后的獨立線程，一般可以用來實現緩存功能。使用 Service Worker的話，傳輸協議必須為 HTTPS。因為 Service Worker 中涉及到請求攔截，所以必須使用 HTTPS 協議來保障安全。Service Worker 的緩存與瀏覽器其他內建的緩存機制不同，它可以讓我們自由控制緩存哪些文件、如何匹配緩存、如何讀取緩存，并且緩存是持續性的。

Service Worker 實現緩存功能一般分為三個步驟：首先需要先注冊 Service Worker，然后監聽到 install 事件以后就可以緩存需要的文件，那么在下次用戶訪問的時候就可以通過攔截請求的方式查詢是否存在緩存，存在緩存的話就可以直接讀取緩存文件，否則就去請求數據。

當 Service Worker 沒有命中緩存的時候，我們需要去調用 fetch 函數獲取數據。也就是說，如果我們沒有在 Service Worker 命中緩存的話，會根據緩存查找優先級去查找數據。但是不管我們是從 Memory Cache 中還是從網絡請求中獲取的數據，瀏覽器都會顯示我們是從 Service Worker 中獲取的內容。

2.Memory Cache

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

那么既然內存緩存這么高效，我們是不是能讓數據都存放在內存中呢？
這是不可能的。計算機中的內存一定比硬盤容量小得多，操作系統需要精打細算內存的使用，所以能讓我們使用的內存必然不多。

當我們訪問過頁面以后，再次刷新頁面，可以發現很多數據都來自于內存緩存

image

內存緩存中有一塊重要的緩存資源是preloader相關指令（例如<link rel="prefetch">）下載的資源?？偹苤猵reloader的相關指令已經是頁面優化的常見手段之一，它可以一邊解析js/css文件，一邊網絡請求下一個資源。

需要注意的事情是，內存緩存在緩存資源時并不關心返回資源的HTTP緩存頭Cache-Control是什么值，同時資源的匹配也并非僅僅是對URL做匹配，還可能會對Content-Type，CORS等其他特征做校驗。

3.Disk Cache

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

在所有瀏覽器緩存中，Disk Cache 覆蓋面基本是最大的。它會根據 HTTP Herder 中的字段判斷哪些資源需要緩存，哪些資源可以不請求直接使用，哪些資源已經過期需要重新請求。并且即使在跨站點的情況下，相同地址的資源一旦被硬盤緩存下來，就不會再次去請求數據。絕大部分的緩存都來自 Disk Cache，關于 HTTP 的協議頭中的緩存字段，我們會在下文進行詳細介紹。

瀏覽器會把哪些文件丟進內存中？哪些丟進硬盤中？
關于這點，網上說法不一，不過以下觀點比較靠得住：

• 對于大文件來說，大概率是不存儲在內存中的，反之優先
• 當前系統內存使用率高的話，文件優先存儲進硬盤

4.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 中的緩存只能被使用一次
• 瀏覽器可以拒絕接受已經存在的資源推送
• 你可以給其他域名推送資源

如果以上四種緩存都沒有命中的話，那么只能發起請求來獲取資源了。

那么為了性能上的考慮，大部分的接口都應該選擇好緩存策略，通常瀏覽器緩存策略分為兩種：強緩存和協商緩存，并且緩存策略都是通過設置 HTTP Header 來實現的。

轉載于:https://www.cnblogs.com/threepigs/p/10547827.html

總結

以上是生活随笔為你收集整理的浏览器的缓存机制的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。