瀏覽器緩存問題原理以及解決方案

wuaiqiu 發(fā)布于2019-04-23 13:44 / 654人閱讀

摘要：瀏覽器緩存問題簡單來說，瀏覽器緩存就是把一個已經(jīng)請求過的資源如頁面，圖片，，數(shù)據(jù)等拷貝一份副本儲存在瀏覽器中。只有當網(wǎng)站明確標識資源已經(jīng)更新，瀏覽器才會再次下載網(wǎng)頁。

瀏覽器緩存問題：

簡單來說，瀏覽器緩存就是把一個已經(jīng)請求過的Web資源（如html頁面，圖片，js，數(shù)據(jù)等）拷貝一份副本儲存在瀏覽器中。緩存會根據(jù)進來的請求保存輸出內(nèi)容的副本。當下一個請求來到的時候，如果是相同的URL，緩存會根據(jù)緩存機制決定是直接使用副本響應訪問請求，還是向源服務(wù)器再次發(fā)送請求。比較常見的就是瀏覽器會緩存訪問過網(wǎng)站的網(wǎng)頁，當再次訪問這個URL地址的時候，如果網(wǎng)頁沒有更新，就不會再次下載網(wǎng)頁，而是直接使用本地緩存的網(wǎng)頁。只有當網(wǎng)站明確標識資源已經(jīng)更新，瀏覽器才會再次下載網(wǎng)頁。

為什么使用緩存：

（1）減少網(wǎng)絡(luò)帶寬消耗

（2）降低服務(wù)器壓力

（3）減少網(wǎng)絡(luò)延遲，加快頁面打開速度

瀏覽器端的緩存規(guī)則：

新鮮度（過期機制）：也就是緩存副本有效期。

校驗值（驗證機制）：資源的實體標簽Etag（EntityTag）

舉個栗子

解決方法：

（1）使用HTMLMeta標簽

　　Web開發(fā)者可以在HTML頁面的節(jié)點中加入標簽，代碼如下

????????????

　　事實上這種禁用緩存的形式用處很有限：

????????? a.僅有IE才能識別這段meta標簽含義，其它主流瀏覽器僅識別“Cache-Control:no-store”的meta標簽。

????????? b.在IE中識別到該meta標簽含義，并不一定會在請求字段加上Pragma，但的確會讓當前頁面每次都發(fā)新請求（僅限頁面，頁面上的資源則不受影響）。

（2）使用緩存有關(guān)的HTTP消息報頭

????????? 在HTTP請求和響應的消息報頭中，常見的與緩存有關(guān)的消息報頭有：

規(guī)則	消息包頭	值/示例	類型	作用
新鮮度	Pragma	no-cache	響應	告訴瀏覽器忽略資源的緩存副本，每次訪問都需要去服務(wù)器拉取【http1.0中存在的字段，在http1.1已被拋棄，使用Cache-Control替代，但為了做http協(xié)議的向下兼容，很多網(wǎng)站依舊會帶上這個字段】
	Expires	Mon,15Aug201603:56:47GMT	響應	啟用緩存和定義緩存時間。告訴瀏覽器資源緩存過期時間，如果還沒過該時間點則不發(fā)請求【http1.0中存在的字段，該字段所定義的緩存時間是相對服務(wù)器上的時間而言的，如果客戶端上的時間跟服務(wù)器上的時間不一致（特別是用戶修改了自己電腦的系統(tǒng)時間），那緩存時間可能就沒啥意義了。在HTTP1.1版開始，使用Cache-Control:max-age=秒替代】
	Cache-Control	no-cache	響應	告訴瀏覽器忽略資源的緩存副本，強制每次請求直接發(fā)送給服務(wù)器，拉取資源，但不是“不緩存”
		no-store	響應	強制緩存在任何情況下都不要保留任何副本
		max-age=[秒]	響應	指明緩存副本的有效時長，從請求時間開始到過期時間之間的秒數(shù)
		public	響應	任何路徑的緩存者（本地緩存、代理服務(wù)器），可以無條件的緩存改資源
		private	響應	只針對單個用戶或者實體（不同用戶、窗口）緩存資源
	Last-Modified	Mon,15Aug201603:56:47GMT	響應	告訴瀏覽器這個資源最后的修改時間。服務(wù)器將資源傳遞給客戶端時，會將資源最后更改的時間以“Last-Modified:GMT”的形式加在實體首部上一起返回給客戶端【只能精確到秒級，如果某些文件在1秒鐘以內(nèi)，被修改多次的話，它將不能準確標注文件的修改時間】
	If-Modified-Since	Mon,15Aug201603:56:47GMT	請求	其值為上次響應頭的Last-Modified值，再次向web服務(wù)器請求時帶上頭If-Modified-Since。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If-Modified-Since則與被請求資源的最后修改時間進行比對。若最后修改時間較新，說明資源又被改動過，則響應整片資源內(nèi)容（寫在響應消息包體內(nèi)），包括更新Last-Modified的值，HTTP200；若最后修改時間較舊，說明資源無新修改，則響應HTTP304(無需包體，節(jié)省瀏覽)，告知瀏覽器繼續(xù)使用所保存的cache
校驗值	ETag	"fd56273325a2114818df4f29a628226d"	響應	告訴瀏覽器當前資源在服務(wù)器的唯一標識符（生成規(guī)則又服務(wù)器決定）
校驗值	If-None-Match	"fd56273325a2114818df4f29a628226d"	請求	當資源過期時（使用Cache-Control標識的max-age），發(fā)現(xiàn)資源具有Etage聲明，則再次向web服務(wù)器請求時帶上頭If-None-Match（Etag的值）。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If-None-Match則與被請求資源的相應校驗串進行比對，決定返回200或304