瀏覽器緩存機制小結

web性能優化措施中，合理設置瀏覽器緩存是重要的優化手段之一，它能夠加快頁面訪問速度和節省用戶網絡帶寬等。

簡單介紹下相關概念。

Expires 和 Cache-Control

Expires出自HTTP1.0，Cache-Control出自HTTP1.1，同時設置二者時，Cache-Control 會覆蓋 Expires。

Expires

Expires指定的是實際過時日期而不是秒數。但Expires存在一些問題，如服務器時間不一樣步或不許確。因此最好使用剩餘秒數而不是絕對時間來表達過時時間。

Cache-Control

Cache-Control可設置max-age值，單位秒，指定緩存過時時間。如：Cache-Control: max-age=3600。

ETag 和 Last-Modified

ETag 和 Last-Modified都由服務器返回在response headers中，其中ETag的優先級比Last-Modified高，也就是說服務器會優先判斷ETag的值。

ETag

ETag是附加到文檔上的任意標籤，多是文檔的序列號或版本號，或者是文檔內容的校驗等。當文檔改變時ETag值也會隨之改變。與ETag相關的是 If-None-Match，當瀏覽器發起請求時，會在If-None-Match字段攜帶ETag的值發給服務器；

Last-Modified

Last-Modified是文檔在服務器端最後被修改的時間。與Last-Modified相關的是If-Modified-Since，當瀏覽器發起請求時，會在If-Modified-Since字段攜帶Last-Modified的值發送給服務器。

強緩存和協商緩存

強緩存

與強緩存有關的是 Expires 和 Cache-Control，若還在設定的時間範圍內，則命中強緩存，瀏覽器不會向服務器發起請求，直接讀取本地緩存。它的返回碼是200，在控制檯network的size欄能夠看到form disk cache或from memory cache。

協商緩存

與協商緩存有關的是 ETag 和 Last-Modified，當服務器收到If-None-Match字段和If-Modified-Since字段攜帶的信息後。若匹配成功，則命中協商緩存，服務器返回304 Not Modified；若匹配不成功，服務器返回200和新的資源。

如何配置瀏覽器緩存

• 在web服務器的返回響應中添加Expires和Cache-Control；
• 在nginx或apache的配置文件中配置Expires和Cache-Control。

小結

• 緩存的類型強緩存和協商緩存。二者區別是，強緩存不會向服務器發請求，而協商緩存會發請求，匹配成功返回304 Not Modified，匹配不成功返回200；
• 瀏覽器會先校驗強緩存，若強緩存未命中，再進行協商緩存校驗。
• ETag的優先級高於Last-Modified，所以協商緩存中服務器會優先判斷ETag的值；
• F5刷新，會跳過強緩存校驗，直接進行協商緩存校驗；Ctrl+F5刷新，會跳過強緩存和協商緩存校驗，直接向服務器請求數據。