瀏覽器緩存機制

DNS緩存

有dns的地方,就有緩存。瀏覽器颈嚼、操作系統(tǒng)畅厢、Local DNS委粉、根域名服務器,它們都會對DNS結(jié)果做一定程度的緩存蓄愁。

DNS查詢過程如下:

首先搜索瀏覽器自身的DNS緩存,如果存在双炕,則域名解析到此完成。
如果瀏覽器自身的緩存里面沒有找到對應的條目涝登,那么會嘗試讀取操作系統(tǒng)的hosts文件看是否存在對應的映射關系,如果存在雄家,則域名解析到此完成。
如果本地hosts文件不存在映射關系胀滚,則查找本地DNS服務器(ISP服務器,或者自己手動設置的DNS服務器),如果存在,域名到此解析完成。
如果本地DNS服務器還沒找到的話,它就會向根服務器發(fā)出請求,進行遞歸查詢乱投。

CDN緩存

瀏覽器本地緩存失效后咽笼,瀏覽器會向CDN邊緣節(jié)點發(fā)起請求。類似瀏覽器緩存,CDN邊緣節(jié)點也存在著一套緩存機制戚炫。CDN邊緣節(jié)點緩存策略因服務商不同而不同剑刑,但一般都會遵循h(huán)ttp標準協(xié)議,通過http響應頭中的
Cache-control: max-age 的字段來設置CDN邊緣節(jié)點數(shù)據(jù)緩存時間。

當瀏覽器向CDN節(jié)點請求數(shù)據(jù)時施掏,CDN節(jié)點會判斷緩存數(shù)據(jù)是否過期钮惠,若緩存數(shù)據(jù)并沒有過期,則直接將緩存數(shù)據(jù)返回給客戶端七芭;否則素挽,CDN節(jié)點就會向服務器發(fā)出回源請求,從服務器拉取最新數(shù)據(jù)狸驳,更新本地緩存预明,并將最新數(shù)據(jù)返回給客戶端。 CDN服務商一般會提供基于文件后綴耙箍、目錄多個維度來指定CDN緩存時間撰糠,為用戶提供更精細化的緩存管理。

CDN 優(yōu)勢
CDN節(jié)點解決了跨運營商和跨地域訪問的問題辩昆,訪問延時大大降低阅酪。
大部分請求在CDN邊緣節(jié)點完成,CDN起到了分流作用汁针,減輕了源服務器的負載术辐。

http緩存機制

HTTP報文

http請求報文(request)
請求行
請求方法??空格??URL?空格??協(xié)議版本?回車符?換行符
請求頭(通用信息頭、請求頭扇丛、實體頭)
頭部字段名?冒號??值??回車鍵?換行符
...
頭部字段名?冒號??值??回車鍵?換行符
空行
回車符???換行符
實體主體(只有post請求有)
主體

http響應報文(response)
狀態(tài)行
協(xié)議版本??空格??狀態(tài)碼?空格??狀態(tài)碼描述?回車符?換行符
響應頭部
頭部字段名?冒號??值???回車符?換行符
...
頭部字段名?冒號??值???回車符?換行符
空行
回車符???換行符
響應正文
正文


HTTP請求流程

瀏覽器初次向服務器發(fā)起請求后拿到請求結(jié)果术吗,會根據(jù)響應報文中HTTP頭的緩存標識,決定是否緩存返回的結(jié)果帆精,是則將請求結(jié)果和緩存標識存入瀏覽器緩存中

瀏覽器每次發(fā)起請求较屿,都會現(xiàn)在瀏覽器緩存中查找該請求的結(jié)果以及緩存標識
瀏覽器????????????????瀏覽器緩存 ???????服務器

——————第一次發(fā)起http請求——————>

<——沒有該請求的緩存結(jié)果和緩存標識————

——————————————發(fā)起http請求——————————————>

<——————————返回該請求結(jié)果和緩存規(guī)則————————————

——將請求結(jié)果和緩存標識存入瀏覽器緩存——>


瀏覽器強制緩存和協(xié)商緩存

瀏覽器強制緩存

強制緩存就是向瀏覽器緩存查找結(jié)果,并根據(jù)該結(jié)果的緩存規(guī)則來決定是否使用該緩存結(jié)果的過程

強制緩存的情況分為三種:
1卓练、不存在該緩存結(jié)果和緩存標識隘蝎,強制緩存失效,直接向服務器發(fā)起請求
2襟企、存在該緩存結(jié)果和緩存標識嘱么,但結(jié)果已經(jīng)失效,強制緩存失效顽悼,使用協(xié)商緩存
3曼振、存在該緩存結(jié)果和緩存標識,且該結(jié)果沒有失效蔚龙,強制緩存生效冰评,直接返回該結(jié)果

控制強制緩存的字段:Expires,Cache-Control

Expires 是 HTTP/1.0 控制緩存的字段木羹,值為服務器返回該請求的結(jié)果緩存時間
即再次發(fā)送請求是甲雅,客戶端時間 小于 Expires的值解孙,直接使用緩存結(jié)果

Cache-Control 是HTTP/1.1的規(guī)則,主要用于控制網(wǎng)頁緩存抛人,主要取值為:
public:所有的內(nèi)容都緩存(客戶端和代理服務器都可以緩存)
private:所有內(nèi)容只有客戶端可以緩存(默認值)
no-cache:客戶端緩存內(nèi)容弛姜,但是是否使用緩存則需要經(jīng)過協(xié)商緩存來驗證決定
no-store:即不使用強制緩存,也不使用協(xié)商緩存
max-age=xxx:緩存內(nèi)容將在xxx秒后失效

Expires 是一個絕對值
Cache-Control 中 max-age 是相對值妖枚,解決了 Expires時期 服務端與客戶端 可能出現(xiàn)時間差的問題

注:Expires和Cache-Control同時存在時廷臼,只有Cache-Control生效

瀏覽器協(xié)商緩存

協(xié)商緩存就是強制緩存失效后,瀏覽器攜帶緩存標識向服務器發(fā)起請求盅惜,由服務器根據(jù)緩存標識決定是否使用緩存的過程

協(xié)商緩存的兩種情況:
1中剩、協(xié)商緩存生效,返回304抒寂,繼續(xù)使用緩存
過程:
瀏覽器?????????????????瀏覽器緩存?????服務器

————————發(fā)起http請求————————>

<——該請求的緩存結(jié)果失效结啼,只返回緩存標識——

————————攜帶該資源的緩存標識,發(fā)起http請求————————>

<—————————————304屈芜,該資源無更新————————————

——————獲取該請求的緩存結(jié)果——————>

<——————返回該請求的緩存結(jié)果——————

2郊愧、協(xié)商緩存失敗,返回200和請求結(jié)果
過程:
瀏覽器?????????????????瀏覽器緩存?????服務器

————————發(fā)起http請求————————>

<——該請求的緩存結(jié)果失效井佑,只返回緩存標識——

————————攜帶該資源的緩存標識属铁,發(fā)起http請求————————>

<————————200,資源已更新躬翁,重新返回請求和結(jié)果———————

——將該請求結(jié)果和緩存標識存入瀏覽器緩存中—>

協(xié)商緩存的標識也是在響應報文的HTTP頭中和請求結(jié)果一起返回給瀏覽器的

控制協(xié)商緩存的字段:
(1) Last-Modified/If-Modified-Since:Last-Modified是服務器響應請求是焦蘑,返回該資源文件在服務器最后被修改的時間;If-Modified-Since再次發(fā)起請求時盒发,攜帶上次返回的Last-Modified的值例嘱,服務器將該字段值與該資源最后修改時間對比,決定是否用緩存
(2)Etag/If-None-Match:Etag服務器響應請求時宁舰,返回當前資源文件的一個唯一標識拼卵,由服務器生成之;If-None-Match是再次發(fā)起請求時蛮艰,攜帶上次返回的唯一標識Etag的值腋腮,服務器收到后,將該字段值與該資源在服務器上的Etag對比壤蚜,一致 則返回304即寡,否則返回200

注:Etag/If-None-Match優(yōu)先級高于Last-Modified/If-Modified-Since,同時存在時只有Etag/If-None-Match生效


緩存

瀏覽器緩存分為:內(nèi)存緩存 和 硬盤緩存

內(nèi)存緩存特性:
(1)快速讀韧嗨ⅰ:內(nèi)存緩存會將編譯解析后的文件嘿悬,存入該進程的內(nèi)存中,便于下次運行時快速讀取
(2)時效性:一旦關閉進程水泉,進程內(nèi)存清空

硬盤緩存特性:
永久性:直接寫入硬盤文件中
復雜、緩慢:讀取緩存對該緩存存放的硬盤文件進行I/O操作,重新解析

from memory cache:使用內(nèi)存中的緩存

from disk cache:使用硬盤中的緩存

瀏覽器讀取順序:memory ——> disk

瀏覽器將js和圖片等文件解析執(zhí)行后直接存入內(nèi)存緩存中草则,F(xiàn)5刷新頁面時钢拧,from memory cache(使用內(nèi)存中的緩存)
css文件存入硬盤中,F(xiàn)5刷新頁面時炕横,from disk cache(使用硬盤中的緩存)

參考文章
https://segmentfault.com/a/1190000017962411
https://www.cnblogs.com/chengxs/p/10396066.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末源内,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子份殿,更是在濱河造成了極大的恐慌膜钓,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件卿嘲,死亡現(xiàn)場離奇詭異颂斜,居然都是意外死亡,警方通過查閱死者的電腦和手機拾枣,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進店門沃疮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人梅肤,你說我怎么就攤上這事司蔬。” “怎么了姨蝴?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵俊啼,是天一觀的道長。 經(jīng)常有香客問我左医,道長授帕,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任炒辉,我火速辦了婚禮豪墅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘黔寇。我一直安慰自己偶器,他們只是感情好,可當我...
    茶點故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布缝裤。 她就那樣靜靜地躺著屏轰,像睡著了一般。 火紅的嫁衣襯著肌膚如雪憋飞。 梳的紋絲不亂的頭發(fā)上霎苗,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天,我揣著相機與錄音榛做,去河邊找鬼唁盏。 笑死内狸,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的厘擂。 我是一名探鬼主播昆淡,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼刽严!你這毒婦竟也來了昂灵?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤舞萄,失蹤者是張志新(化名)和其女友劉穎眨补,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體倒脓,經(jīng)...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡撑螺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了把还。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片实蓬。...
    茶點故事閱讀 40,567評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖吊履,靈堂內(nèi)的尸體忽然破棺而出安皱,到底是詐尸還是另有隱情,我是刑警寧澤艇炎,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布酌伊,位于F島的核電站,受9級特大地震影響缀踪,放射性物質(zhì)發(fā)生泄漏居砖。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一驴娃、第九天 我趴在偏房一處隱蔽的房頂上張望奏候。 院中可真熱鬧,春花似錦唇敞、人聲如沸蔗草。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽咒精。三九已至,卻和暖如春旷档,著一層夾襖步出監(jiān)牢的瞬間模叙,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工鞋屈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留范咨,地道東北人故觅。 一個月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像湖蜕,于是被迫代替她去往敵國和親逻卖。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,585評論 2 359

推薦閱讀更多精彩內(nèi)容