基于HTTP瀏覽器緩存機(jī)制全面解析
什么是瀏覽器緩存
Web緩存是指一個(gè)Web資源(如html頁(yè)面,圖片,js,數(shù)據(jù)等)存在于Web服務(wù)器和客戶端(瀏覽器)之間的副本。緩存會(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è)。瀏覽器和網(wǎng)站服務(wù)器是根據(jù)緩存機(jī)制進(jìn)行緩存的
非HTTP協(xié)議定義的緩存機(jī)制
瀏覽器緩存機(jī)制,其實(shí)主要就是HTTP協(xié)議定義的緩存機(jī)制(如: Expires; Cache-control等)。但是也有非HTTP協(xié)議定義的緩存機(jī)制,如使用HTML Meta 標(biāo)簽,Web開發(fā)者可以在HTML頁(yè)面的節(jié)點(diǎn)中加入標(biāo)簽
<meta http-equiv="Pragma" content="no-cache">
上述代碼的作用是告訴瀏覽器當(dāng)前頁(yè)面不被緩存,每次訪問都需要去服務(wù)器拉取。使用上很簡(jiǎn)單,但只有部分瀏覽器可以支持,而且所有緩存代理服務(wù)器都不支持,因?yàn)榇聿唤馕鯤TML內(nèi)容本身。
緩存流程圖
利用瀏覽器緩存的過程:
HTTP緩存機(jī)制
根據(jù)Response Header里面的Cache-Control和Expires這兩個(gè)屬性,當(dāng)兩個(gè)都存在時(shí),Cache-Control優(yōu)先級(jí)較高。
Cache-Control
該字段用于控制瀏覽器在什么情況下直接使用本地緩存而不向服務(wù)器發(fā)送請(qǐng)求。一般具有以下值:
Public
:指示響應(yīng)可被任何緩存區(qū)緩存。Private
:指示對(duì)于單個(gè)用戶的整個(gè)或部分響應(yīng)消息,不能被共享緩存處理。這允許服務(wù)器僅僅描述當(dāng)用戶的部分響應(yīng)消息,此響應(yīng)消息對(duì)于其他用戶的請(qǐng)求無(wú)效。no-cache
:指示請(qǐng)求或響應(yīng)消息不能緩存。no-store
:用于防止重要的信息被無(wú)意的發(fā)布。在請(qǐng)求消息中發(fā)送將使得請(qǐng)求和響應(yīng)消息都不使用緩存。max-age
:指示瀏覽器可以接收生存期不大于指定時(shí)間(以秒為單位)的響應(yīng)。min-fresh
:指示瀏覽器可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)。max-stale
:指示瀏覽器可以接收超出超時(shí)期間的響應(yīng)消息。如果指定max-stale消息的值,那么瀏覽器可以接收超出超時(shí)期指定值之內(nèi)的響應(yīng)消息。
Expires(石器時(shí)代的緩存機(jī)制)
Expires 頭部字段提供一個(gè)日期和時(shí)間,在該日期前的所有對(duì)該資源的請(qǐng)求都會(huì)直接使用瀏覽器緩存而不用向服務(wù)器請(qǐng)求。
例如:Expires: Sun, 08 Nov 2009 03:37:26 GMT
注意:
- cache-control max-age 和 max-stale將覆蓋Expires header。
- 使用Expires存在服務(wù)器端時(shí)間和瀏覽器時(shí)間不一致的問題。
- 另外有人說Expires 是HTTP 1.0的東西,現(xiàn)在默認(rèn)瀏覽器均默認(rèn)使用HTTP 1.1。
服務(wù)端如何判斷緩存已失效
服務(wù)端通過If-Modified-Since(Last-Modified)和If-None-Match(Etag)這兩個(gè)屬性的值來判斷緩存是否失效的。
Last-Modified/If-Modified-Since
Last-Modified/If-Modified-Since要配合Cache-Control使用。
Last-Modified
:響應(yīng)資源的最后修改時(shí)間。
If-Modified-Since
:當(dāng)緩存過期時(shí),發(fā)現(xiàn)資源具有Last-Modified聲明,則在請(qǐng)求頭帶上If-Modified-Since(值就是Last-Modified)。服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-Modified-Since則與被請(qǐng)求資源的最后修改時(shí)間進(jìn)行比對(duì)。若最后修改時(shí)間較新,說明資源又被改動(dòng)過,則響應(yīng)HTTP 200整片資源內(nèi)容(寫在響應(yīng)消息包體內(nèi));若最后修改時(shí)間較舊,說明資源無(wú)新修改,則響應(yīng)HTTP 304,告知瀏覽器繼續(xù)使用所保存的cache。
Etag/If-None-Match
Etag/If-None-Match也要配合Cache-Control使用。
Etag
:資源在服務(wù)器的唯一標(biāo)識(shí)(生成規(guī)則由服務(wù)器決定)。Apache中,ETag的值,默認(rèn)是對(duì)文件的索引節(jié)(INode),大?。⊿ize)和最后修改時(shí)間(MTime)進(jìn)行Hash后得到的。
If-None-Match
:當(dāng)緩存過期時(shí),發(fā)現(xiàn)資源具有Etage聲明,則在請(qǐng)求頭帶上If-None-Match(值就是Etag)。服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-None-Match 則與被請(qǐng)求資源的相應(yīng)校驗(yàn)串進(jìn)行比對(duì),決定返回200或304。
為什么有了Last-Modified還要Etag?
Etag的出現(xiàn)主要是為了解決幾個(gè)Last-Modified比較難解決的問題:
- Last-Modified標(biāo)注的最后修改只能精確到秒級(jí),如果某些文件在1秒鐘以內(nèi),被修改多次的話,它將不能準(zhǔn)確標(biāo)注文件的修改時(shí)間。
- 如果某些文件會(huì)被定期生成,當(dāng)有時(shí)內(nèi)容并沒有任何變化,但Last-Modified卻改變了,導(dǎo)致文件沒法使用緩存。
- 有可能存在服務(wù)器沒有準(zhǔn)確獲取文件修改時(shí)間,或者與代理服務(wù)器時(shí)間不一致等情形。
200 OK(from cache)與304 Not Modified的區(qū)別
200 OK( from cache )不向服務(wù)器發(fā)送請(qǐng)求,直接使用本地緩存文件。304 Not Modified則向服務(wù)器詢問,若服務(wù)器認(rèn)為瀏覽器的緩存版本還可用,那么便會(huì)返回304。
200 OK( from cache ) 出現(xiàn)操作:
1.地址欄回車
2.頁(yè)面鏈接跳轉(zhuǎn)
3.前進(jìn)、后退
304 Not Modified 出現(xiàn)操作:
1.F5刷新
2.新開窗口
緩存的不同來源
from disk cache
:從磁盤中獲取緩存資源,等待下次訪問時(shí)不需要重新下載資源,而直接從磁盤中獲取。它的直接操作對(duì)象為CurlCacheManager。
from memory cache
:從內(nèi)存中獲取資源,等待下次訪問時(shí)不需要重新下載資源,而直接從內(nèi)存中獲取。
兩者區(qū)別:當(dāng)退出進(jìn)程時(shí),內(nèi)存中的數(shù)據(jù)會(huì)被清空,而磁盤的數(shù)據(jù)不會(huì),所以,當(dāng)下次再進(jìn)入該進(jìn)程時(shí),該進(jìn)程仍可以從diskCache中獲得數(shù)據(jù),而memoryCache則不行。
不能被緩存的請(qǐng)求
當(dāng)然并不是所有請(qǐng)求都能被緩存。
無(wú)法被瀏覽器緩存的請(qǐng)求:
- HTTP信息頭中包含Cache-Control:no-cache,pragma:no-cache(HTTP1.0),或Cache-Control:max-age=0等告訴瀏覽器不用緩存的請(qǐng)求
- 需要根據(jù)Cookie,認(rèn)證信息等決定輸入內(nèi)容的動(dòng)態(tài)請(qǐng)求是不能被緩存的
- 經(jīng)過HTTPS安全加密的請(qǐng)求
- POST請(qǐng)求無(wú)法被緩存
- HTTP響應(yīng)頭中不包含Last-Modified/Etag,也不包含Cache-Control/Expires的請(qǐng)求無(wú)法被緩存
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- 瀏覽器緩存知識(shí)小結(jié)及應(yīng)用分析
- js清除瀏覽器緩存的幾種方法
- 清除瀏覽器緩存的幾種方法總結(jié)(必看)
- 詳解Linux搭建DNS服務(wù)器
- windows server 2008 r2 DNS服務(wù)器配置圖文教程
- Docker 默認(rèn)bridge網(wǎng)絡(luò)中配置DNS的方法
- Windows Server2012 安裝配置DNS服務(wù)器方法詳解
- 在Windows 7 上安裝DNS服務(wù)器bind9方法詳解
- Linux下修改IP、DNS和路由命令行配置方法
- 解決Cent0S 6.7直接在/etc/resolv.conf文件下修改DNS地址重啟不生效問題
- 詳解用Nginx搭建CDN服務(wù)器方法(圖文)
- 網(wǎng)站加速之CDN、SCDN、DCDN區(qū)別在哪?如何選擇?
- 利用CDN加速react webpack打包后的文件詳解
- 阿里云服務(wù)器實(shí)現(xiàn)域名解析步驟(小白教程)
- 一文帶你了解什么是瀏覽器緩存,DNS,CDN及域名解析類型
相關(guān)文章
IE里button設(shè)置border:none屬性無(wú)效解決方法
本文說明了IE設(shè)置border:none屬性無(wú)效的解決方法,下面給出了二種方法,可以根據(jù)情況參考使用2013-11-11CSS網(wǎng)頁(yè)布局入門教程7:二列固定寬度居中
CSS網(wǎng)頁(yè)布局入門教程7:二列固定寬度居中...2007-09-09網(wǎng)頁(yè)顏色搭配技巧 文字字體、字號(hào)、字體排版等
一般來說,網(wǎng)頁(yè)的背景色應(yīng)該柔和一些、素一些、淡一些,再配上深色的文字,使人看起來自然、舒暢2007-03-03