一、前言
緩存可以說是性能優化中簡單高效的一種優化方式了。一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，並且由於緩存文件可以重複利用，還可以減少帶寬，降低網絡負荷。
對於一個數據請求來說，可以分為發起網絡請求、後端處理、瀏覽器響應三個步驟。瀏覽器緩存可以幫助我們在第一和第三步驟中優化性能。比如說直接使用緩存而不發起請求，或者發起了請求但後端存儲的數據和前端一致，那麼就沒有必要再將數據回傳回來，這樣就減少了響應數據。
接下來的內容中我們將通過緩存位置、緩存策略以及實際場景應用緩存策略來探討瀏覽器緩存機制。
** 如需獲取思維導圖或想閱讀更多優質文章請猛戳GitHub 博客。
二、緩存位置
從緩存位置上來說分為四種，並且各自有優先級，當依次查找緩存且都沒有命中的時候，才會去請求網絡。
- 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 頁面，內存中的緩存也就被釋放了。
那麼既然內存緩存這麼高效，我們是不是能讓數據都存放在內存中呢？這是不可能的。計算機中的內存一定比硬盤容量小得多，操作系統需要精打細算內存的使用，所以能讓我們使用的內存必然不多。
當我們訪問過頁面以後，再次刷新頁面，可以發現很多數據都來自於內存緩存。
內存緩存中有一塊重要的緩存資源是 preloader 相關指令（例如
