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

時間 2019-12-20

原文原文鏈接

瀏覽器緩存問題：html

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

爲何使用緩存：瀏覽器

（1）減小網絡帶寬消耗緩存

（2）下降服務器壓力服務器

（3）減小網絡延遲，加快頁面打開速度網絡

瀏覽器端的緩存規則：網站

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

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

舉個栗子代理

解決方法：

（1）使用HTMLMeta標籤

　　Web開發者能夠在HTML頁面的<head>節點中加入<meta>標籤，代碼以下

<metahttp-equiv="Pragma"content="no-cache">

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

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

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

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

在HTTP請求和響應的消息報頭中，常見的與緩存有關的消息報頭有：

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