瀏覽器快取機制

不敗王者發表於2019-08-03

瀏覽器快取機制

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

上述程式碼的作用是告訴瀏覽器當前頁面不被快取，每次訪問都需要去伺服器拉取。使用上很簡單，但只有部分瀏覽器可以支援，而且所有快取代理伺服器都不支援，因為代理不解析HTML內容本身。

下面我主要介紹HTTP協議定義的快取機制。

Expires策略

Expires是Web伺服器響應訊息頭欄位，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器快取取資料，而無需再次請求。

下面是寶寶PK專案中，瀏覽器拉取jquery.js web伺服器的響應頭：

注：Date頭域表示訊息傳送的時間，時間的描述格式由rfc822定義。例如，Date: Mon,31 Dec 2001 04:25:57GMT。

Web伺服器告訴瀏覽器在2012-11-28 03:30:01這個時間點之前，可以使用快取檔案。傳送請求的時間是2012-11-28 03:25:01，即快取5分鐘。

不過Expires 是HTTP 1.0的東西，現在預設瀏覽器均預設使用HTTP 1.1，所以它的作用基本忽略。

Cache-control策略（重點關注）

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

還是上面那個請求，web伺服器返回的Cache-Control頭的值為max-age=300，即5分鐘（和上面的Expires時間一致，這個不是必須的）。

Last-Modified/If-Modified-Since

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

l Last-Modified：標示這個響應資源的最後修改時間。web伺服器在響應請求時，告訴瀏覽器資源的最後修改時間。

l 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使用。

l Etag：web伺服器響應請求時，告訴瀏覽器當前資源在伺服器的唯一標識（生成規則由伺服器覺得）。Apache中，ETag的值，預設是對檔案的索引節（INode），大小（Size）和最後修改時間（MTime）進行Hash後得到的。

l If-None-Match：當資源過期時（使用Cache-Control標識的max-age），發現資源具有Etage宣告，則再次向web伺服器請求時帶上頭If-None-Match （Etag的值）。web伺服器收到請求後發現有頭If-None-Match 則與被請求資源的相應校驗串進行比對，決定返回200或304。