浏览器缓存问题原理以及解决方案
瀏覽器緩存問題:
簡單來說,瀏覽器緩存就是把一個已經(jīng)請求過的Web資源(如html頁面,圖片,js,數(shù)據(jù)等)拷貝一份副本儲存在瀏覽器中。緩存會根據(jù)進(jìn)來的請求保存輸出內(nèi)容的副本。當(dāng)下一個請求來到的時候,如果是相同的URL,緩存會根據(jù)緩存機(jī)制決定是直接使用副本響應(yīng)訪問請求,還是向源服務(wù)器再次發(fā)送請求。比較常見的就是瀏覽器會緩存訪問過網(wǎng)站的網(wǎng)頁,當(dāng)再次訪問這個URL地址的時候,如果網(wǎng)頁沒有更新,就不會再次下載網(wǎng)頁,而是直接使用本地緩存的網(wǎng)頁。只有當(dāng)網(wǎng)站明確標(biāo)識資源已經(jīng)更新,瀏覽器才會再次下載網(wǎng)頁。
為什么使用緩存:
(1)減少網(wǎng)絡(luò)帶寬消耗
(2)降低服務(wù)器壓力
(3)減少網(wǎng)絡(luò)延遲,加快頁面打開速度
瀏覽器端的緩存規(guī)則:
新鮮度(過期機(jī)制):也就是緩存副本有效期。
校驗值(驗證機(jī)制):資源的實體標(biāo)簽Etag(EntityTag)
?
舉個栗子
?
?
解決方法:
(1)使用HTMLMeta標(biāo)簽
Web開發(fā)者可以在HTML頁面的<head>節(jié)點中加入<meta>標(biāo)簽,代碼如下
???????????? <metahttp-equiv="Pragma"content="no-cache">
事實上這種禁用緩存的形式用處很有限:
????????? a.僅有IE才能識別這段meta標(biāo)簽含義,其它主流瀏覽器僅識別“Cache-Control:no-store”的meta標(biāo)簽。
????????? b.在IE中識別到該meta標(biāo)簽含義,并不一定會在請求字段加上Pragma,但的確會讓當(dāng)前頁面每次都發(fā)新請求(僅限頁面,頁面上的資源則不受影響)。
(2)使用緩存有關(guān)的HTTP消息報頭
????????? 在HTTP請求和響應(yīng)的消息報頭中,常見的與緩存有關(guān)的消息報頭有:
| 規(guī)則 | 消息包頭 | 值/示例 | 類型 | 作用 |
| 新鮮度 | Pragma | no-cache | 響應(yīng) | 告訴瀏覽器忽略資源的緩存副本,每次訪問都需要去服務(wù)器拉取【http1.0中存在的字段,在http1.1已被拋棄,使用Cache-Control替代,但為了做http協(xié)議的向下兼容,很多網(wǎng)站依舊會帶上這個字段】 |
| Expires | Mon,15Aug201603:56:47GMT | 響應(yīng) | 啟用緩存和定義緩存時間。告訴瀏覽器資源緩存過期時間,如果還沒過該時間點則不發(fā)請求【http1.0中存在的字段,該字段所定義的緩存時間是相對服務(wù)器上的時間而言的,如果客戶端上的時間跟服務(wù)器上的時間不一致(特別是用戶修改了自己電腦的系統(tǒng)時間),那緩存時間可能就沒啥意義了。在HTTP1.1版開始,使用Cache-Control:max-age=秒替代】 | |
| Cache-Control | no-cache | 響應(yīng) | 告訴瀏覽器忽略資源的緩存副本,強(qiáng)制每次請求直接發(fā)送給服務(wù)器,拉取資源,但不是“不緩存” | |
| no-store | 響應(yīng) | 強(qiáng)制緩存在任何情況下都不要保留任何副本 | ||
| max-age=[秒] | 響應(yīng) | 指明緩存副本的有效時長,從請求時間開始到過期時間之間的秒數(shù) | ||
| public | 響應(yīng) | 任何路徑的緩存者(本地緩存、代理服務(wù)器),可以無條件的緩存改資源 | ||
| private | 響應(yīng) | 只針對單個用戶或者實體(不同用戶、窗口)緩存資源 | ||
| Last-Modified | Mon,15Aug201603:56:47GMT | 響應(yīng) | 告訴瀏覽器這個資源最后的修改時間。服務(wù)器將資源傳遞給客戶端時,會將資源最后更改的時間以“Last-Modified:GMT”的形式加在實體首部上一起返回給客戶端【只能精確到秒級,如果某些文件在1秒鐘以內(nèi),被修改多次的話,它將不能準(zhǔn)確標(biāo)注文件的修改時間】 | |
| If-Modified-Since | Mon,15Aug201603:56:47GMT | 請求 | 其值為上次響應(yīng)頭的Last-Modified值,再次向web服務(wù)器請求時帶上頭If-Modified-Since。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If-Modified-Since則與被請求資源的最后修改時間進(jìn)行比對。若最后修改時間較新,說明資源又被改動過,則響應(yīng)整片資源內(nèi)容(寫在響應(yīng)消息包體內(nèi)),包括更新Last-Modified的值,HTTP200;若最后修改時間較舊,說明資源無新修改,則響應(yīng)HTTP304(無需包體,節(jié)省瀏覽),告知瀏覽器繼續(xù)使用所保存的cache | |
| 校驗值 | ETag | "fd56273325a2114818df4f29a628226d" | 響應(yīng) | 告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識符(生成規(guī)則又服務(wù)器決定) |
| If-None-Match | "fd56273325a2114818df4f29a628226d" | 請求 | 當(dāng)資源過期時(使用Cache-Control標(biāo)識的max-age),發(fā)現(xiàn)資源具有Etage聲明,則再次向web服務(wù)器請求時帶上頭If-None-Match(Etag的值)。web服務(wù)器收到請求后發(fā)現(xiàn)有頭If-None-Match則與被請求資源的相應(yīng)校驗串進(jìn)行比對,決定返回200或304 |
?實際工作中我們完全可以時用上面這些參數(shù)的設(shè)置來組織/控制、更好的利用緩存來為我們服務(wù)。
總結(jié)
以上是生活随笔為你收集整理的浏览器缓存问题原理以及解决方案的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 移动端学习目录
- 下一篇: 浏览器滚动条 --- 自定义“衣裳”