瀏覽器緩存的力量

在前端性能優化的方式中，最重要的當然是緩存了，使用好了緩存，對項目有很大的幫助。比如我們訪問網頁時，使用網頁後退功能，會發現加載的非常快，體驗感很好，這就是緩存的力量。

什麼是緩存呢？

當我們第一次訪問網站的時候，比如 juejin.cn，電腦會把網站上的圖片和數據下載到電腦上，當我們再次訪問該網站的時候，網站就會從電腦中直接加載出來，這就是緩存。

緩存有哪些好處？

  1. 緩解服務器壓力，不用每次都去請求某些數據了。

  2. 提升性能，打開本地資源肯定會比請求服務器來的快。

  3. 減少帶寬消耗，當我們使用緩存時，只會產生很小的網絡消耗，至於爲什麼打開本地資源也會產生網絡消耗，下面會有說明。

Web 緩存種類： 數據庫緩存，CDN 緩存，代理服務器緩存，瀏覽器緩存。

所謂瀏覽器緩存其實就是指在本地使用的計算機中開闢一個內存區，同時也開闢一個硬盤區作爲數據傳輸的緩衝區，然後用這個緩衝區來暫時保存用戶以前訪問過的信息。

瀏覽器緩存過程： 強緩存，協商緩存。

瀏覽器緩存位置一般分爲四類： Service Worker-->Memory Cache-->Disk Cache-->Push Cache。

  1. 強緩存

強緩存是當我們訪問 URL 的時候，不會向服務器發送請求，直接從緩存中讀取資源，但是會返回 200 的狀態碼。

如何設置強緩存？

我們第一次進入頁面，請求服務器，然後服務器進行應答，瀏覽器會根據 response Header 來判斷是否對資源進行緩存，如果響應頭中 expires、pragma 或者 cache-control 字段，代表這是強緩存，瀏覽器就會把資源緩存在 memory cache 或 disk cache 中。

第二次請求時，瀏覽器判斷請求參數，如果符合強緩存條件就直接返回狀態碼 200，從本地緩存中拿數據。否則把響應參數存在 request header 請求頭中，看是否符合協商緩存，符合則返回狀態碼 304，不符合則服務器會返回全新資源。

expires

是 HTTP1.0 控制網頁緩存的字段，值爲一個時間戳，準確來講是格林尼治時間，服務器返回該請求結果緩存的到期時間，意思是，再次發送請求時，如果未超過過期時間，直接使用該緩存，如果過期了則重新請求。

有個缺點，就是它判斷是否過期是用本地時間來判斷的，本地時間是可以自己修改的。

Cache-Control

是 HTTP1.1 中控制網頁緩存的字段，當 Cache-Control 都存在時，Cache-Control 優先級更高，主要取值爲：

public：資源客戶端和服務器都可以緩存。

privite：資源只有客戶端可以緩存。

no-cache：客戶端緩存資源，但是是否緩存需要經過協商緩存來驗證。

no-store：不使用緩存。

max-age：緩存保質期。

Cache-Control 使用了 max-age 相對時間，解決了 expires 的問題。

pragma

這個是 HTTP1.0 中禁用網頁緩存的字段，其取值爲 no-cache，和 Cache-Control 的 no-cache 效果一樣。

  1. 緩存位置

上面我們說，強緩存我們會把資源房放到 memory cache 和 disk cache 中，那什麼資源放在 memory cache，什麼資源放在 disk cache 中？

存存儲圖像和網頁等資源主要緩存在 disk cache，操作系統緩存文件等資源大部分都會緩存在 memory cache 中。具體操作瀏覽器自動分配，看誰的資源利用率不高就分給誰。

可以看到 memory cache 請求時間都是 0ms，這個是不是太神奇了，這方面我來梳理下。

查找瀏覽器緩存時會按順序查找: Service Worker-->Memory Cache-->Disk Cache-->Push Cache。

1. Service Worker

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

2. Memory Cache

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

3. Disk Cache

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

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

memory cache 要比 disk cache 快的多。舉個例子：從遠程 web 服務器直接提取訪問文件可能需要 500 毫秒 (半秒)，那麼磁盤訪問可能需要 10-20 毫秒，而內存訪問只需要 100 納秒，更高級的還有 L1 緩存訪問(最快和最小的 CPU 緩存) 只需要 0.5 納秒。

很神奇的，我們又看到了一個 prefetch cache，這個又是什麼呢?

prefetch cache(預取緩存)

link 標籤上帶了 prefetch，再次加載會出現。

prefetch 是預加載的一種方式，被標記爲 prefetch 的資源，將會被瀏覽器在空閒時間加載。

4. Push Cache

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

5. CPU、內存、硬盤

這裏提到了硬盤，內存，可能有些小夥伴對硬盤，內存沒什麼直觀的概念。

CPU、內存、硬盤都是計算機的主要組成部分。

CPU：中央處理單元 (CntralPocessingUit) 的縮寫，也叫處理器，是計算機的運算核心和控制核心。電腦靠 CPU 來運算、控制。讓電腦的各個部件順利工作，起到協調和控制作用。

硬盤：存儲資料和軟件等數據的設備，有容量大，斷電數據不丟失的特點。

內存：負責硬盤等硬件上的數據與 CPU 之間數據交換處理。特點是體積小，速度快，有電可存，無電清空，即電腦在開機狀態時內存中可存儲數據，關機後將自動清空其中的所有數據。

  1. 協商緩存

協商緩存就是強緩存失效後，瀏覽器攜帶緩存標識向服務器發送請求，由服務器根據緩存標識來決定是否使用緩存的過程。

主要有以下兩種情況：

協商緩存生效，返回 304

協商緩存失效，返回 200 和請求結果

如何設置協商緩存？

Last-Modified / If-Modified-Since

Last-Modified 是服務器響應請求時，返回該資源文件在服務器最後被修改的時間。

If-Modified-Since 則是客戶端再次發起該請求時，攜帶上次請求返回的 Last-Modified 值，通過此字段值告訴服務器該資源上次請求返回的最後被修改時間。服務器收到該請求，發現請求頭含有 If-Modified-Since 字段，則會根據 If-Modified-Since 的字段值與該資源在服務器的最後被修改時間做對比，若服務器的資源最後被修改時間大於 If-Modified-Since 的字段值，則重新返回資源，狀態碼爲 200；否則則返回 304，代表資源無更新，可繼續使用緩存文件。

Etag / If-None-Match

Etag 是服務器響應請求時，返回當前資源文件的一個唯一標識 (由服務器生成)。

If-None-Match 是客戶端再次發起該請求時，攜帶上次請求返回的唯一標識 Etag 值，通過此字段值告訴服務器該資源上次請求返回的唯一標識值。服務器收到該請求後，發現該請求頭中含有 If-None-Match，則會根據 If-None-Match 的字段值與該資源在服務器的 Etag 值做對比，一致則返回 304，代表資源無更新，繼續使用緩存文件；不一致則重新返回資源文件，狀態碼爲 200。

Etag / If-None-Match 優先級高於 Last-Modified / If-Modified-Since，同時存在則只有 Etag / If-None-Match 生效。

  1. 緩存方案

目前的項目大多使用這種緩存方案的：

  1. 強緩存與協商緩存的區別

  1. 強緩存不發請求到服務器，所以有時候資源更新了瀏覽器還不知道，但是協商緩存會發請求到服務器，所以資源是否更新，服務器肯定知道。

  2. 大部分 web 服務器都默認開啓協商緩存。

  3. 刷新對於強緩存和協商緩存的影響

  1. 當 ctrl+f5 強制刷新網頁時，直接從服務器加載，跳過強緩存和協商緩存。

  2. 當 f5 刷新網頁時，跳過強緩存，但是會檢查協商緩存。

  3. 瀏覽器地址欄中寫入 URL，回車 瀏覽器發現緩存中有這個文件了，不用繼續請求了，直接去緩存拿。（最快）

關於本文

https://juejin.cn/post/6947936223126093861

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/gV5CA96hsYNPBBn9iRcheg

猜你喜歡