5分鐘看懂系列：HTTP緩存機制詳解

什麼是HTTP緩存

HTTP 緩存能夠說是HTTP性能優化中簡單高效的一種優化方式了，緩存是一種保存資源副本並在下次請求時直接使用該副本的技術，當 web 緩存發現請求的資源已經被存儲，它會攔截請求，返回該資源的拷貝，而不會去源服務器從新下載。
一個優秀的緩存策略能夠縮短網頁請求資源的距離，減小延遲，節省網絡流量，而且因爲緩存文件能夠重複利用，下降網絡負荷，提升客戶端響應。
因此，學會利用HTTP緩存是頗有必要的
在此，我會向你們系統的介紹HTTP緩存機制，指望對各位正確的理解HTTP緩存有所幫助。

緩存策略

在闡述HTTP不一樣緩存策略以前，咱們須要知道用戶刷新/訪問行爲 的手段分紅三類：

• 在URI輸入欄中輸入而後回車/經過書籤訪問
• F5/點擊工具欄中的刷新按鈕/右鍵菜單從新加載
• Ctl+F5 （徹底不使用HTTP緩存）

不一樣的刷新手段，會致使瀏覽器使用不一樣的緩存策略，咱們下面會分析到

HTTP 緩存主要是經過請求和響應報文頭中的對應 Header 信息，來控制緩存的策略。
響應頭中相關字段爲Expires、Cache-Control、Last-Modified、Etag。

HTTP緩存的類型不少，根據是否須要從新向服務器發起請求來分類包括兩種：強制緩存 和 對比緩存
假設瀏覽器有一個緩存數據庫用於本地緩存，先看看瀏覽器請求資源的狀況：

強制緩存：
在瀏覽器已經緩存數據的狀況下，使用強制緩存去請求數據的流程是這樣的：

強制緩存

從流程圖能夠看到，強制緩存，在緩存數據未失效的狀況下，能夠直接使用緩存數據，不須要再請求服務器，那麼瀏覽器是如何判斷緩存數據是否失效呢？
對於強制緩存來講，響應header中會有兩個字段來標明失效規則（Expires/Cache-Control）：

• Expires：

Expires是HTTP1.0的產物了，如今默認瀏覽器均默認使用HTTP 1.1，因此它的做用基本忽略。可是不少網站仍是對它作了兼容。它的值爲服務端返回的到期時間，即下一次請求時，請求時間小於服務端返回的到期時間，直接使用緩存數據。
但有一個問題是到期時間是由服務端生成的，若是客戶端時間跟服務器時間不一致，這就會致使緩存命中的偏差。
在HTTP 1.1 的版本，Expires被Cache-Control替代。

• Cache-Control：

Cache-Control是最重要的規則。常見的取值有private、public、no-cache、max-age，no-store，默認爲private。

（1） max-age：用來設置資源（representations）能夠被緩存多長時間，單位爲秒；
（2） s-maxage：和max-age是同樣的，不過它只針對代理服務器緩存而言；
（3）public：指示響應可被任何緩存區緩存；
（4）private：只能針對我的用戶，而不能被代理服務器緩存；
（5）no-cache：強制客戶端直接向服務器發送請求,也就是說每次請求都必須向服務器發送。服務器接收到 請求，而後判斷資源是否變動，是則返回新內容，不然返回304，未變動。這個很容易讓人產生誤解，令人誤 覺得是響應不被緩存。實際上Cache-Control: no-cache是會被緩存的，只不過每次在向客戶端（瀏覽器）提供響應數據時，緩存都要向服務器評估緩存響應的有效性。
（6）no-store：禁止一切緩存（這個纔是響應不被緩存的意思）。

舉個例子：
好比一個資源響應頭是：

cache-control: public, max-age=31536000

那麼這個資源會被緩存31536000秒（365天），在365天內再次請求這條數據，都會直接獲取緩存數據庫中的數據，直接使用。
那麼咱們試試再次訪問資源，會有如下的響應：

能夠看到HTTP狀態碼是200，Size這個字段顯示：disk cache，說明HTTP響應報文大小是0，瀏覽器確實走了強制緩存，沒有再跟瀏覽器交互。
咱們上面說了，不一樣的訪問/刷新手段，會使瀏覽器使用不一樣的緩存策略，要讓瀏覽器走強制緩存對請求方式有一個要求: 在URI輸入欄中輸入而後回車/經過書籤訪問

對比緩存：

在瀏覽器已經緩存數據的狀況下，使用對比緩存去請求數據的流程是這樣的：

有同窗可能會問，基於對比緩存的流程下，不論是否使用緩存，都須要向服務器發送請求，那麼還用緩存幹什麼？
這個問題，咱們如今來探討一下。
對比緩存，顧名思義，須要進行比較判斷是否可使用緩存。
瀏覽器第一次請求數據時，服務器會將緩存標識與數據一塊兒返回給瀏覽器，瀏覽器將兩者備份至緩存數據庫中。
當瀏覽器再次請求數據時，瀏覽器將備份的緩存標識發送給服務器，服務器根據緩存標識進行判斷，判斷成功後，返回304狀態碼，通知客戶端比較成功，可使用緩存數據。
舉個例子：
第一次訪問：

第二次訪問：

對比緩存，響應header中會有兩個字段來標明規則

• Last-Modified / If-Modified-Since

服務器響應請求時，會經過Last-ModifiedHTTP頭告訴瀏覽器資源的最後修改時間，瀏覽器本地對資源緩存起來，以後再請求的時候，會帶上一個HTTP頭If-Modified-Since，這個值就是服務器上一次給的Last-Modified的時間，服務器會拿着瀏覽器傳過來的時間比對資源當前最後的修改時間，若是大於If-Modified-Since，則說明資源修改過了，瀏覽器不能再使用緩存，服務器從新一份完整的資源瀏覽器，不然瀏覽器能夠繼續使用緩存，並返回304狀態碼

• Etag / If-None-Match（優先級高於Last-Modified / If-Modified-Since）

服務器響應請求時，經過EtagHTTP頭部告訴瀏覽器當前資源在服務器的惟一標識（生成規則由服務器決定），瀏覽器再次請求時，就會帶上一個頭If-None-Match，這個值就是服務器上一次給的Etag的值，服務器比對一下資源當前的Etag是否跟If-None-Match一致，不一致則說明資源修改過了，瀏覽器不能再使用緩存，不然瀏覽器能夠繼續使用緩存，並返回304狀態碼

值得注意的是：Etag 的校驗優先級高於 Last-Modified
看個例子：
第一次請求，服務器的響應頭包含了

第二次請求，瀏覽器的請求頭

總結

咱們再看一下HTTP緩存的一個總概流程圖：

• HTTP緩存主要分強制緩存和對比緩存
• 強制緩存的HTTP相關頭部Cache-Control，Exipres（HTTP1.0）,瀏覽器直接讀本地緩存，不會再跟服務器端交互，狀態碼200。
• 對比緩存的HTTP相關頭部Last-Modified / If-Modified-Since， Etag / If-None-Match (優先級比Last-Modified / If-Modified-Since高)，每次請求須要讓服務器判斷一下資源是否更新過，從而決定瀏覽器是否使用緩存，若是是，則返回304，不然從新完整響應。

關於我

若是文章對你有收穫，能夠收藏轉發，這會給我一個大大鼓勵喲！另外能夠關注我公衆號【碼農富哥】 (coder2025)，我會持續輸出原創的算法，計算機基礎文章！