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

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

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

瀏覽器緩存問題：

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

為什么使用緩存：

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

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

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

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

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

校驗(yàn)值（驗(yàn)證機(jī)制）：資源的實(shí)體標(biāo)簽Etag（EntityTag）

舉個(gè)栗子

解決方法：

（1）使用HTMLMeta標(biāo)簽

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

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

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

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

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

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

????????? 在HTTP請(qǐng)求和響應(yīng)的消息報(bào)頭中，常見的與緩存有關(guān)的消息報(bào)頭有：

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