瀏覽器緩存學習

瀏覽器端的緩存

瀏覽器端的緩存規則分別從新鮮度和校驗值兩個維度來規定瀏覽器是直接使用緩存副本，仍是從新去源服務器獲取最新版本。

新鮮度（過時機制）：也就是緩存副本有效期。 
一個緩存副本必須知足如下條件之一，瀏覽器會認爲它是有效的，足夠新的： 
1. 含有完整的過時時間控制頭信息（HTTP協議報頭），而且仍在有效期內； 
2. 瀏覽器已經使用過這個緩存副本，而且在一個會話中已經檢查過新鮮度；

校驗值（驗證機制）：服務器返回資源的時候有時在控制頭信息帶上這個資源的實體標籤Etag（Entity Tag），它能夠用來做爲瀏覽器再次請求過程的校驗標識。如過發現校驗標識不匹配，說明資源已經被修改或過時，瀏覽器需求從新獲取資源內容。

 

使用緩存有關的HTTP消息報頭

規則	消息報頭	值/示例	類型	做用
新鮮度	Expires	Sun,16 Oct 2016 05:43:02 GMT	響應	告訴瀏覽器在過時時間前可使用副本（有可能存在時間不一致問題）
	Pragma	no-cache	響應	告訴瀏覽器忽略資源的緩存副本（HTTP1.1 可用Cache-Control替換）
	Cache-Control	no-cache	響應	告訴瀏覽器忽略資源的緩存副本，強制每次請求直接發給源服務器
		no-store	響應	強制緩存在任何狀況下都不保留任何副本
		max-age=[秒]	響應	指明緩存副本的有效時長，從請求時間開始到過時時間以前的秒數
		public	響應	任何途徑的緩存者（本地緩存，代理服務器），能夠無條件地緩存該資源
		private	響應	只針對單個用戶或實體（不一樣用戶，窗口）緩存資源
	Last-Modified	Sun,16 Oct 2016 05:43:02 GMT	響應	告訴瀏覽器當前資源的最後修改時間
	If-Modified-Since	Sun,16 Oct 2016 05:43:02 GMT	響應	若是瀏覽器第一次請求時響應中的 Last-Modified 非空，第二次請求同一資源時，就會把它做爲該項的值發送給服務器
校驗值	ETag	50b1c1d4f775c61:df3	響應	告知瀏覽器當前資源在服務器的惟一標識符（生成規則由服務器決定）
	If-None-Match	50b1c1d4f775c61:df3	請求	若是瀏覽器第一次請求時響應中ETag非空，第二次請求同一資源時，會把它做爲該項的值發給服務器
輔助	Vary	Accept-Encoding	響應	輔助從多個緩存副本中篩選合適的版本（不一樣壓縮算法產生的副本）

 

Expires與Cache-Control

Cache-Control與Expires的做用一致，都是指明當前資源的有效期，控制瀏覽器是直接從瀏覽器緩存取數據仍是從新發請求到服務器取數據。只不過Cache-Control的選擇更多，設置更細緻，若是同時設置的話，Cache-Control的優先級高於Expires。

 

Last-Modified/ETag與Cache-Control/Expires

Last-Modified/ETag：瀏覽器再次訪問統一URI的資源，仍是會發送請求到服務器詢問文件是否已經修改，若是沒有，服務器會只發送一個304回給瀏覽器，告訴瀏覽器直接從本身本地的緩存取數據；若是修改過那就整個數據從新發給瀏覽器；

Cache-Control/Expires：若是檢測到本地的緩存仍是有效的時間範圍內，瀏覽器直接使用本地副本，不會發送任何請求。

二者一塊兒使用時，Cache-Control/Expires的優先級要高於Last-Modified/ETag。即當本地副本根據Cache-Control/Expires發現還在有效期內時，則不會再次發送請求去服務器詢問修改時間（Last-Modified）或實體標識（Etag）了。

通常狀況下，使用Cache-Control/Expires會配合Last-Modified/ETag一塊兒使用，由於即便服務器設置緩存時間, 當用戶點擊「刷新」按鈕時，瀏覽器會忽略緩存繼續向服務器發送請求，這時Last-Modified/ETag將可以很好利用304，從而減小響應開銷。

 

Last-Modified與ETag

HTTP1.1中Etag的出現主要是爲了解決幾個Last-Modified比較難解決的問題： 
1. Last-Modified標註的最後修改只能精確到秒級，若是某些文件在1秒鐘之內，被修改屢次的話，它將不能準確標註文件的新鮮度 
2. 若是某些文件會被按期生成，當有時內容並無任何變化，但Last-Modified卻改變了，致使文件無法使用緩存 
3. 有可能存在服務器沒有準確獲取文件修改時間，或者與代理服務器時間不一致等情形

 

用戶行爲與緩存

 

用戶操做	Cache-Control/Expires	Last-Modified/ETag
地址欄回車	有效	有效
頁面連接跳轉	有效	有效
新開窗口	有效	有效
前進後退	有效	有效
F5刷新	無效	有效
Ctrl+F5強制刷新	無效	無效