瀏覽器 HTTP 協議快取機制詳解

阿新 • • 發佈：2022-04-28

最近在準備優化日誌請求時遇到了一些令人疑惑的問題，比如為什麼響應頭裡出現了兩個 cache control、為什麼明明設定了 no cache 卻還是發請求，為什麼多次訪問時有時請求裡帶了 etag，有時又沒有帶？等等。。。

後來查了一些資料以及同事親自驗證，總算對這些問題有了個清晰的理解，現在整理出來以備忘。

1、快取的分類

快取分為服務端側（server side，比如 Nginx、Apache）和客戶端側（client side，比如 web browser）。

服務端快取又分為代理伺服器快取和反向代理伺服器快取（也叫閘道器快取，比如 Nginx反向代理、Squid等），其實廣泛使用的 CDN 也是一種服務端快取，目的都是讓使用者的請求走”捷徑“，並且都是快取圖片、檔案等靜態資源。

客戶端側快取一般指的是瀏覽器快取，目的就是加速各種靜態資源的訪問，想想現在的大型網站，隨便一個頁面都是一兩百個請求，每天 pv 都是億級別，如果沒有快取，使用者體驗會急劇下降、同時伺服器壓力和網路頻寬都面臨嚴重的考驗。

2、瀏覽器快取機制詳解

瀏覽器快取控制機制有兩種：HTML Meta標籤 vs. HTTP頭資訊

2.1 HTML Meta標籤控制快取

瀏覽器快取機制，其實主要就是HTTP協議定義的快取機制（如： Expires； Cache-control等）。但是也有非HTTP協議定義的快取機制，如使用HTML Meta 標籤，Web開發者可以在HTML頁面的<head>節點中加入<meta>標籤，程式碼如下：

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

上述程式碼的作用是告訴瀏覽器當前頁面不被快取，每次訪問都需要去伺服器拉取。使用上很簡單，但只有部分瀏覽器可以支援，而且所有快取代理伺服器都不支援，因為代理不解析HTML內容本身。而廣泛應用的還是 HTTP頭資訊來控制快取，下面我主要介紹HTTP協議定義的快取機制。

2.2 HTTP頭資訊控制快取

2.2.1 瀏覽器請求流程

瀏覽器第一次請求流程圖：

瀏覽器再次請求時：

2.2.2 幾個重要概念解釋

Expires策略：Expires是Web伺服器響應訊息頭欄位，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器快取取資料，而無需再次請求。不過Expires 是HTTP 1.0的東西，現在預設瀏覽器均預設使用HTTP 1.1，所以它的作用基本忽略。Expires 的一個缺點就是，返回的到期時間是伺服器端的時間，這樣存在一個問題，如果客戶端的時間與伺服器的時間相差很大（比如時鐘不同步，或者跨時區），那麼誤差就很大，所以在HTTP 1.1版開始，使用Cache-Control: max-age=秒替代。

Cache-control策略（重點關注）：Cache-Control與Expires的作用一致，都是指明當前資源的有效期，控制瀏覽器是否直接從瀏覽器快取取資料還是重新發請求到伺服器取資料。只不過Cache-Control的選擇更多，設定更細緻，如果同時設定的話，其優先順序高於Expires。

值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age
各個訊息中的指令含義如下：
Public指示響應可被任何快取區快取。
Private指示對於單個使用者的整個或部分響應訊息，不能被共享快取處理。這允許伺服器僅僅描述當用戶的部分響應訊息，此響應訊息對於其他使用者的請求無效。
no-cache指示請求或響應訊息不能快取，該選項並不是說可以設定”不快取“，容易望文生義~
no-store用於防止重要的資訊被無意的釋出。在請求訊息中傳送將使得請求和響應訊息都不使用快取，完全不存下來。
max-age指示客戶機可以接收生存期不大於指定時間（以秒為單位）的響應。
min-fresh指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。
max-stale指示客戶機可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值，那麼客戶機可以接收超出超時期指定值之內的響應訊息。

Last-Modified/If-Modified-Since：Last-Modified/If-Modified-Since要配合Cache-Control使用。

Last-Modified：標示這個響應資源的最後修改時間。web伺服器在響應請求時，告訴瀏覽器資源的最後修改時間。
If-Modified-Since：當資源過期時（使用Cache-Control標識的max-age），發現資源具有Last-Modified宣告，則再次向web伺服器請求時帶上頭 If-Modified-Since，表示請求時間。web伺服器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應訊息包體內），HTTP 200；若最後修改時間較舊，說明資源無新修改，則響應HTTP 304 (無需包體，節省瀏覽)，告知瀏覽器繼續使用所儲存的cache。

Etag/If-None-Match：Etag/If-None-Match也要配合Cache-Control使用。

Etag：web伺服器響應請求時，告訴瀏覽器當前資源在伺服器的唯一標識（生成規則由伺服器決定）。Apache中，ETag的值，預設是對檔案的索引節（INode），大小（Size）和最後修改時間（MTime）進行Hash後得到的。
If-None-Match：當資源過期時（使用Cache-Control標識的max-age），發現資源具有Etage宣告，則再次向web伺服器請求時帶上頭If-None-Match （Etag的值）。web伺服器收到請求後發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對，決定返回200或304。

既生Last-Modified何生Etag？你可能會覺得使用Last-Modified已經足以讓瀏覽器知道本地的快取副本是否足夠新，為什麼還需要Etag（實體標識）呢？HTTP1.1中Etag的出現主要是為了解決幾個Last-Modified比較難解決的問題：

Last-Modified標註的最後修改只能精確到秒級，如果某些檔案在1秒鐘以內，被修改多次的話，它將不能準確標註檔案的修改時間
如果某些檔案會被定期生成，當有時內容並沒有任何變化，但Last-Modified卻改變了，導致檔案沒法使用快取
有可能存在伺服器沒有準確獲取檔案修改時間，或者與代理伺服器時間不一致等情形

Etag是伺服器自動生成或者由開發者生成的對應資源在伺服器端的唯一識別符號，能夠更加準確的控制快取。Last-Modified與ETag一起使用時，伺服器會優先驗證ETag。

yahoo的Yslow法則中則提示謹慎設定Etag：需要注意的是分散式系統裡多臺機器間檔案的last-modified必須保持一致，以免負載均衡到不同機器導致比對失敗，Yahoo建議分散式系統儘量關閉掉Etag(每臺機器生成的etag都會不一樣，因為除了 last-modified、inode 也很難保持一致)。
Pragma行是為了相容HTTP1.0，作用與Cache-Control: no-cache是一樣的。
最後總結下幾種狀態碼的區別：

3、使用者行為與快取

瀏覽器快取行為還有使用者的行為有關，如果大家對強制重新整理（Ctrl + F5）還有印象的話應該能立刻明白我的意思~

使用者操作	Expires/Cache-Control	Last-Modified/Etag
位址列回車	有效	有效
頁面連結跳轉	有效	有效
新開視窗	有效	有效
前進、後退	有效	有效
F5/按鈕重新整理	無效(BR重置max-age=0)	有效
Ctrl+F5重新整理	無效（重置CC=no-cache）	無效（請求頭丟棄該選項）