瀏覽器緩存問題:
簡單來說,瀏覽器緩存就是把一個已經請求過的Web資源(如html頁面,圖片,js,數據等)拷貝一份副本儲存在瀏覽器中。緩存會根據進來的請求保存輸出內容的副本。當下一個請求來到的時候,如果是相同的URL,緩存會根據緩存機制決定是直接使用副本響應訪問請求,還是向源服務器再次發送請求。比較常見的就是瀏覽器會緩存訪問過網站的網頁,當再次訪問這個URL地址的時候,如果網頁沒有更新,就不會再次下載網頁,而是直接使用本地緩存的網頁。只有當網站明確標識資源已經更新,瀏覽器才會再次下載網頁。
為什么使用緩存:
(1)減少網絡帶寬消耗
(2)降低服務器壓力
(3)減少網絡延遲,加快頁面打開速度
瀏覽器端的緩存規則:
新鮮度(過期機制):也就是緩存副本有效期。
校驗值(驗證機制):資源的實體標簽Etag(EntityTag)
?
舉個栗子
?
?
解決方法:
(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 |
?實際工作中我們完全可以時用上面這些參數的設置來組織/控制、更好的利用緩存來為我們服務。