緩存機制 · 前端筆記

[TOC] # 簡介 ![](https://box.kancloud.cn/908f736a122ef289531188197c85f4ff_2889x869.png) 緩存可以說是性能優化中**簡單高效**的一種優化方式了，它可以**顯著減少網絡傳輸所帶來的損耗**。對于一個數據請求來說，可以分為發起網絡請求、后端處理、瀏覽器響應三個步驟。瀏覽器緩存可以幫助我們在第一和第三步驟中優化性能。比如說直接使用緩存而不發起請求，或者發起了請求但后端存儲的數據和前端一致，那么就沒有必要再將數據回傳回來，這樣就減少了響應數據。 # 緩存位置從緩存位置上來說分為四種，并且各自有**優先級**，當依次查找緩存且都沒有命中的時候，才會去請求網絡 1. Service Worker 2. Memory Cache 3. Disk Cache 4. Push Cache 5. 網絡請求 ## 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 中獲取的內容。 ## Memory Cache Memory Cache 也就是內存中的緩存，讀取內存中的數據肯定比磁盤快。**但是內存緩存雖然讀取高效，可是緩存持續性很短，會隨著進程的釋放而釋放。** 一旦我們關閉 Tab 頁面，內存中的緩存也就被釋放了。 當我們訪問過頁面以后，再次刷新頁面，可以發現很多數據都來自于內存緩存 ![](https://box.kancloud.cn/5f18a861919132e3154373f0d2e6b0ed_794x149.png) 那么既然內存緩存這么高效，我們是不是能讓數據都存放在內存中呢？ 先說結論，這是**不可能**的。首先計算機中的內存一定比硬盤容量小得多，操作系統需要精打細算內存的使用，所以能讓我們使用的內存必然不多。 內存緩存中有一塊重要的緩存資源是preloader相關指令（例如`<link rel="prefetch">`）下載的資源。總所周知preloader的相關指令已經是頁面優化的常見手段之一，它可以一邊解析js/css文件，一邊網絡請求下一個資源。 需要注意的事情是，**內存緩存在緩存資源時并不關心返回資源的HTTP緩存頭Cache-Control是什么值，同時資源的匹配也并非僅僅是對URL做匹配，還可能會對Content-Type，CORS等其他特征做校驗**。 ## Disk Cache Disk Cache 也就是存儲在硬盤中的緩存，讀取速度慢點，但是什么都能存儲到磁盤中，比之 Memory Cache**勝在容量和存儲時效性上。** 在所有瀏覽器緩存中，Disk Cache 覆蓋面基本是最大的。它會根據 HTTP Herder 中的字段判斷哪些資源需要緩存，哪些資源可以不請求直接使用，哪些資源已經過期需要重新請求。**并且即使在跨站點的情況下，相同地址的資源一旦被硬盤緩存下來，就不會再次去請求數據。** ## Push Cache Push Cache 是 HTTP/2 中的內容，當以上三種緩存都沒有命中時，它才會被使用。**并且緩存時間也很短暫，只在會話（Session）中存在，一旦會話結束就被釋放。** Push Cache 在國內能夠查到的資料很少，也是因為 HTTP/2 在國內不夠普及，但是 HTTP/2 將會是日后的一個趨勢。這里推薦閱讀[HTTP/2 push is tougher than I thought](https://link.juejin.im/?target=https%3A%2F%2Fjakearchibald.com%2F2017%2Fh2-push-tougher-than-i-thought%2F)這篇文章，但是內容是英文的，我翻譯一下文章中的幾個結論，有能力的同學還是推薦自己閱讀 * 所有的資源都能被推送，但是 Edge 和 Safari 瀏覽器兼容性不怎么好 * 可以推送`no-cache`和`no-store`的資源 * 一旦連接被關閉，Push Cache 就被釋放 * 多個頁面可以使用相同的 HTTP/2 連接，也就是說能使用同樣的緩存 * Push Cache 中的緩存只能被使用一次 * 瀏覽器可以拒絕接受已經存在的資源推送 * 你可以給其他域名推送資源 ## 網絡請求如果所有緩存都沒有命中的話，那么只能發起請求來獲取資源了。 那么為了性能上的考慮，大部分的接口都應該選擇好緩存策略，接下來我們就來學習緩存策略這部分的內容。 # 緩存策略通常瀏覽器緩存策略分為兩種：**強緩存**和**協商緩存**，并且緩存策略都是通過設置 HTTP Header 來實現的。 ## 強緩存強緩存：不會向服務器發送請求，直接從緩存中讀取資源，在chrome控制臺的Network選項中可以看到該請求返回200的狀態碼，并且Size顯示from disk cache或from memory cache。強緩存可以通過設置兩種 HTTP Header 實現：Expires 和 Cache-Control。 ### Expires **緩存過期時間，用來指定資源到期的時間，是服務器端的具體的時間點**。也就是說，Expires=max-age + 請求時間，需要和Last-modified結合使用。Expires是Web服務器響應消息頭字段，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據，而無需再次請求。 ~~~ Expires: Wed, 22 Oct 2018 08:41:00 GMT ~~~ `Expires`是 HTTP/1 的產物，表示資源會在`Wed, 22 Oct 2018 08:41:00 GMT`后過期，需要再次請求。并且`Expires`**受限于本地時間**，如果修改了本地時間，可能會造成緩存失效。 ### Cache-control ~~~ Cache-control: max-age=30 ~~~ `Cache-Control`出現于 HTTP/1.1，**優先級高于`Expires`**。該屬性值表示資源會在 30 秒后過期，需要再次請求。 `Cache-Control`**可以在請求頭或者響應頭中設置**，并且可以組合使用多種指令 ![](https://box.kancloud.cn/daee5394f08455454ba205888d0e2aea_595x600.png) 從圖中我們可以看到，我們可以將**多個指令配合起來一起使用**，達到多個目的。比如說我們希望資源能被緩存下來，并且是客戶端和代理服務器都能緩存，還能設置緩存失效時間等等。 Cache-Control 可以在請求頭或者響應頭中設置，并且可以組合使用多種指令： ![](https://box.kancloud.cn/4070bf2db219087dc846a3849c856003_770x486.png) * **public**：**所有內容都將被緩存（客戶端和代理服務器都可緩存）**。具體來說響應可被任何中間節點緩存，如 Browser <-- proxy1 <-- proxy2 <-- Server，中間的proxy可以緩存資源，比如下次再請求同一資源proxy1直接把自己緩存的東西給 Browser 而不再向proxy2要。 * **private**：**所有內容只有客戶端可以緩存**，Cache-Control的默認取值。具體來說，表示中間節點不允許緩存，對于Browser <-- proxy1 <-- proxy2 <-- Server，proxy 會老老實實把Server 返回的數據發送給proxy1,自己不緩存任何數據。當下次Browser再次請求時proxy會做好請求轉發而不是自作主張給自己緩存的數據。 * **no-cache**：客戶端緩存內容，是否使用緩存則需要經過協商緩存來驗證決定。表示不使用 Cache-Control的緩存控制方式做前置驗證，而是使用 Etag 或者Last-Modified字段來控制緩存。**需要注意的是，no-cache這個名字有一點誤導。設置了no-cache之后，并不是說瀏覽器就不再緩存數據，只是瀏覽器在使用緩存數據時，需要先確認一下數據是否還跟服務器保持一致。** * **no-store**：所有內容都不會被緩存，即不使用強制緩存，也不使用協商緩存 * **max-age**：max-age=xxx (xxx is numeric)表示緩存內容將在xxx秒后失效 * **s-maxage**（單位為s)：同max-age作用一樣，只在代理服務器中生效（比如CDN緩存）。比如當s-maxage=60時，在這60秒中，即使更新了CDN的內容，瀏覽器也不會進行請求。max-age用于普通緩存，而s-maxage用于代理緩存。**s-maxage的優先級高于max-age**。如果存在s-maxage，則會覆蓋掉max-age和Expires header。 * **max-stale**：能容忍的最大過期時間。max-stale指令標示了客戶端愿意接收一個已經過期了的響應。如果指定了max-stale的值，則最大容忍時間為對應的秒數。如果沒有指定，那么說明瀏覽器愿意接收任何age的響應（age表示響應由源站生成或確認的時間與當前時間的差值）。 * **min-fresh**：能夠容忍的最小新鮮度。min-fresh標示了客戶端不愿意接受新鮮度不多于當前的age加上min-fresh設定的時間之和的響應。 ### Expires和Cache-Control兩者對比其實這兩者差別不大，區別就在于 Expires 是http1.0的產物，Cache-Control是http1.1的產物，**兩者同時存在的話，Cache-Control優先級高于Expires**；在某些不支持HTTP1.1的環境下，Expires就會發揮用處。所以Expires其實是過時的產物，現階段它的存在只是一種兼容性的寫法。強緩存判斷是否緩存的依據來自于是否超出某個時間或者某個時間段，而不關心服務器端文件是否已經更新，這可能會導致加載文件不是服務器端最新的內容，**那我們如何獲知服務器端內容是否已經發生了更新呢**？此時我們需要用到協商緩存策略。 ## 協商緩存 **協商緩存就是強制緩存失效后，瀏覽器攜帶緩存標識向服務器發起請求，由服務器根據緩存標識決定是否使用緩存的過程。** 當瀏覽器發起請求驗證資源時，如果資源沒有做改變，那么服務端就會返回 304 狀態碼，并且更新瀏覽器緩存有效期。 ![](https://box.kancloud.cn/04e0f1719bff88ae0902fee3bd1e5268_474x215.png) 如果緩存過期了，就需要發起請求驗證資源是否有更新。協商緩存可以通過設置兩種 HTTP Header 實現：`Last-Modified`和`ETag`。 ### Last-Modified 和 If-Modified-Since `Last-Modified`表示本地文件最后修改日期，`If-Modified-Since`會將`Last-Modified`的值發送給服務器，詢問服務器在該日期后資源是否有更新，有更新的話就會將新的資源發送回來，否則返回 304 狀態碼。但是`Last-Modified`存在一些弊端： * 如果本地打開緩存文件，即使沒有對文件進行修改，但還是會造成`Last-Modified`被修改，服務端不能命中緩存導致發送相同的資源 * 因為`Last-Modified`只能以秒計時，如果在不可感知的時間內修改完成文件，那么服務端會認為資源還是命中了，不會返回正確的資源因為以上這些弊端，所以在 HTTP / 1.1 出現了`ETag`。 ### ETag 和 If-None-Match `ETag`類似于文件指紋，`If-None-Match`會將當前`ETag`發送給服務器，詢問該資源`ETag`是否變動，有變動的話就將新的資源發送回來。并且`ETag`優先級比`Last-Modified`高。以上就是緩存策略的所有內容了，看到這里，不知道你是否存在這樣一個疑問。**如果什么緩存策略都沒設置，那么瀏覽器會怎么處理？** 對于這種情況，瀏覽器會采用一個啟發式的算法，通常會取響應頭中的`Date`減去`Last-Modified`值的 10% 作為緩存時間。 # 緩存機制 **強制緩存優先于協商緩存進行，若強制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進行協商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協商緩存由服務器決定是否使用緩存，若協商緩存失效，那么代表該請求的緩存失效，返回200，重新返回資源和緩存標識，再存入瀏覽器緩存中；生效則返回304，繼續使用緩存**。具體流程圖如下： ![](https://box.kancloud.cn/8c82ddfe08d49dfba9601e0c0440f720_834x878.png) **如果什么緩存策略都沒設置，那么瀏覽器會怎么處理？** 對于這種情況，瀏覽器會采用一個啟發式的算法，通常會取響應頭中的 Date 減去 Last-Modified 值的 10% 作為緩存時間。 # 實際場景應用緩存策略單純了解理論而不付諸于實踐是沒有意義的，接下來我們來通過幾個場景學習下如何使用這些理論。 ## 頻繁變動的資源對于頻繁變動的資源，首先需要使用`Cache-Control: no-cache`使瀏覽器每次都請求服務器，然后配合`ETag`或者`Last-Modified`來驗證資源是否有效。這樣的做法雖然不能節省請求數量，但是能顯著減少響應數據大小。 ## 代碼文件這里特指除了 HTML 外的代碼文件，因為 HTML 文件一般不緩存或者緩存時間很短。一般來說，現在都會使用工具來打包代碼，那么我們就可以對文件名進行哈希處理，只有當代碼修改后才會生成新的文件名。基于此，我們就可以給代碼文件設置緩存有效期一年`Cache-Control: max-age=31536000`，這樣只有當 HTML 文件中引入的文件名發生了改變才會去下載最新的代碼文件，否則就一直使用緩存。 # 用戶操作行為與緩存用戶在使用瀏覽器的時候，會有各種操作，比如輸入地址后回車，按F5刷新等，這些行為會對緩存有什么影響呢？ ![](https://box.kancloud.cn/a45981e4ebf36cd438f1142050cf3929_490x171.png) # 參考資料 [深入理解瀏覽器的緩存機制](https://www.jianshu.com/p/54cc04190252) * 前端面試之道 - 掘金小冊 [no-cache,max-age=0,nostore區別及304原理](https://www.zhoulujun.cn/html/theory/network/2018_0306_8078.html)