瀏覽器緩存機(jī)制

瀏覽器緩存機(jī)制炮车,其實(shí)主要就是HTTP協(xié)議定義的緩存機(jī)制(如: Expires; Cache-control等)。但是也有非HTTP協(xié)議定義的緩存機(jī)制瘦穆,如使用HTML Meta 標(biāo)簽纪隙,Web開(kāi)發(fā)者可以在HTML頁(yè)面的<head>節(jié)點(diǎn)中加入<meta>標(biāo)簽,代碼如下:

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

上述代碼的作用是告訴瀏覽器當(dāng)前頁(yè)面不被緩存扛或,每次訪問(wèn)都需要去服務(wù)器拉取绵咱。使用上很簡(jiǎn)單,但只有部分瀏覽器可以支持熙兔,而且所有緩存代理服務(wù)器都不支持悲伶,因?yàn)榇聿唤馕鯤TML內(nèi)容本身。

下面我主要介紹HTTP協(xié)議定義的緩存機(jī)制住涉。

Expires策略

Expires是Web服務(wù)器響應(yīng)消息頭字段麸锉,在響應(yīng)http請(qǐng)求時(shí)告訴瀏覽器在過(guò)期時(shí)間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù),而無(wú)需再次請(qǐng)求舆声,不過(guò)Expires 是HTTP 1.0的東西花沉,現(xiàn)在默認(rèn)瀏覽器均默認(rèn)使用HTTP 1.1,所以它的作用基本忽略媳握。

Cache-control策略

Cache-Control與Expires的作用一致碱屁,都是指明當(dāng)前資源的有效期,控制瀏覽器是否直接從瀏覽器緩存取數(shù)據(jù)還是重新發(fā)請(qǐng)求到服務(wù)器取數(shù)據(jù)蛾找。只不過(guò)Cache-Control的選擇更多忽媒,設(shè)置更細(xì)致,如果同時(shí)設(shè)置的話腋粥,其優(yōu)先級(jí)高于Expires。

http協(xié)議頭Cache-Control :

1:值可以是public架曹、private隘冲、no-cache、no- store绑雄、no-transform展辞、must-revalidate、proxy-revalidate万牺、max-age

2:各個(gè)消息中的指令含義如下:

  • 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指示客戶機(jī)可以接收生存期不大于指定時(shí)間(以秒為單位)的響應(yīng)。
  • min-fresh指示客戶機(jī)可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)。
  • max-stale指示客戶機(jī)可以接收超出超時(shí)期間的響應(yīng)消息噪沙。如果指定max-stale消息的值炼彪,那么客戶機(jī)可以接收超出超時(shí)期指定值之內(nèi)的響應(yīng)消息。
Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since要配合Cache-Control使用正歼。

  • Last-Modified:標(biāo)示這個(gè)響應(yīng)資源的最后修改時(shí)間辐马。web服務(wù)器在響應(yīng)請(qǐng)求時(shí),告訴瀏覽器資源的最后修改時(shí)間局义。
  • If-Modified-Since:當(dāng)資源過(guò)期時(shí)(使用Cache-Control標(biāo)識(shí)的max-age)喜爷,發(fā)現(xiàn)資源具有Last-Modified聲明,則再次向web服務(wù)器請(qǐng)求時(shí)帶上頭 If-Modified-Since旭咽,表示請(qǐng)求時(shí)間贞奋。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-Modified-Since 則與被請(qǐng)求資源的最后修改時(shí)間進(jìn)行比對(duì)。若最后修改時(shí)間較新穷绵,說(shuō)明資源又被改動(dòng)過(guò)轿塔,則響應(yīng)整片資源內(nèi)容(寫在響應(yīng)消息包體內(nèi)),HTTP 200仲墨;若最后修改時(shí)間較舊勾缭,說(shuō)明資源無(wú)新修改,則響應(yīng)HTTP 304 (無(wú)需包體目养,節(jié)省瀏覽)俩由,告知瀏覽器繼續(xù)使用所保存的cache。
Etag/If-None-Match
  • Etag:web服務(wù)器響應(yīng)請(qǐng)求時(shí)癌蚁,告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識(shí)(生成規(guī)則由服務(wù)器覺(jué)得)幻梯。Apache中,ETag的值努释,默認(rèn)是對(duì)文件的索引節(jié)(INode)碘梢,大小(Size)和最后修改時(shí)間(MTime)進(jìn)行Hash后得到的伐蒂。
  • If-None-Match:當(dāng)資源過(guò)期時(shí)(使用Cache-Control標(biāo)識(shí)的max-age)煞躬,發(fā)現(xiàn)資源具有Etage聲明,則再次向web服務(wù)器請(qǐng)求時(shí)帶上頭If-None-Match (Etag的值)逸邦。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-None-Match 則與被請(qǐng)求資源的相應(yīng)校驗(yàn)串進(jìn)行比對(duì)恩沛,決定返回200或304。

既生Last-Modified何生Etag缕减?

你可能會(huì)覺(jué)得使用Last-Modified已經(jīng)足以讓瀏覽器知道本地的緩存副本是否足夠新雷客,為什么還需要Etag(實(shí)體標(biāo)識(shí))呢?HTTP1.1中Etag的出現(xiàn)主要是為了解決幾個(gè)Last-Modified比較難解決的問(wèn)題:

1:Last-Modified標(biāo)注的最后修改只能精確到秒級(jí)桥狡,如果某些文件在1秒鐘以內(nèi)佛纫,被修改多次的話妓局,它將不能準(zhǔn)確標(biāo)注文件的修改時(shí)間
2:如果某些文件會(huì)被定期生成,當(dāng)有時(shí)內(nèi)容并沒(méi)有任何變化呈宇,但Last-Modified卻改變了好爬,導(dǎo)致文件沒(méi)法使用緩存
3:有可能存在服務(wù)器沒(méi)有準(zhǔn)確獲取文件修改時(shí)間,或者與代理服務(wù)器時(shí)間不一致等情形

Etag是服務(wù)器自動(dòng)生成或者由開(kāi)發(fā)者生成的對(duì)應(yīng)資源在服務(wù)器端的唯一標(biāo)識(shí)符甥啄,能夠更加準(zhǔn)確的控制緩存存炮。Last-Modified與ETag是可以一起使用的,服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag蜈漓,一致的情況下穆桂,才會(huì)繼續(xù)比對(duì)Last-Modified,最后才決定是否返回304融虽。

用戶行為與緩存
瀏覽器緩存.png
瀏覽器第一次請(qǐng)求:
瀏覽器緩存2.png
瀏覽器再次請(qǐng)求時(shí):
瀏覽器緩存3.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末享完,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子有额,更是在濱河造成了極大的恐慌般又,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,013評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件巍佑,死亡現(xiàn)場(chǎng)離奇詭異茴迁,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)萤衰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,205評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門堕义,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人脆栋,你說(shuō)我怎么就攤上這事倦卖。” “怎么了椿争?”我有些...
    開(kāi)封第一講書人閱讀 152,370評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵怕膛,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我丘薛,道長(zhǎng),這世上最難降的妖魔是什么邦危? 我笑而不...
    開(kāi)封第一講書人閱讀 55,168評(píng)論 1 278
  • 正文 為了忘掉前任洋侨,我火速辦了婚禮,結(jié)果婚禮上倦蚪,老公的妹妹穿的比我還像新娘希坚。我一直安慰自己,他們只是感情好陵且,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,153評(píng)論 5 371
  • 文/花漫 我一把揭開(kāi)白布裁僧。 她就那樣靜靜地躺著个束,像睡著了一般。 火紅的嫁衣襯著肌膚如雪聊疲。 梳的紋絲不亂的頭發(fā)上茬底,一...
    開(kāi)封第一講書人閱讀 48,954評(píng)論 1 283
  • 那天,我揣著相機(jī)與錄音获洲,去河邊找鬼阱表。 笑死,一個(gè)胖子當(dāng)著我的面吹牛贡珊,可吹牛的內(nèi)容都是我干的最爬。 我是一名探鬼主播,決...
    沈念sama閱讀 38,271評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼门岔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼爱致!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起寒随,我...
    開(kāi)封第一講書人閱讀 36,916評(píng)論 0 259
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤糠悯,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后牢裳,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體逢防,經(jīng)...
    沈念sama閱讀 43,382評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,877評(píng)論 2 323
  • 正文 我和宋清朗相戀三年蒲讯,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了忘朝。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 37,989評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡判帮,死狀恐怖局嘁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情晦墙,我是刑警寧澤悦昵,帶...
    沈念sama閱讀 33,624評(píng)論 4 322
  • 正文 年R本政府宣布,位于F島的核電站晌畅,受9級(jí)特大地震影響但指,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜抗楔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,209評(píng)論 3 307
  • 文/蒙蒙 一棋凳、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧连躏,春花似錦剩岳、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,199評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)晓铆。三九已至,卻和暖如春绰播,著一層夾襖步出監(jiān)牢的瞬間骄噪,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,418評(píng)論 1 260
  • 我被黑心中介騙來(lái)泰國(guó)打工幅垮, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留腰池,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,401評(píng)論 2 352
  • 正文 我出身青樓忙芒,卻偏偏與公主長(zhǎng)得像示弓,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子呵萨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,700評(píng)論 2 345

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

  • 緩存一直是前端優(yōu)化的主戰(zhàn)場(chǎng), 利用好緩存就成功了一半. 本篇從http請(qǐng)求和響應(yīng)的頭域入手, 讓你對(duì)瀏覽器緩存有個(gè)...
    易斯大大閱讀 768評(píng)論 0 1
  • 瀏覽器緩存機(jī)制奏属,其實(shí)主要就是HTTP協(xié)議定義的緩存機(jī)制(如:Expires;Cache-control等)潮峦。但是也...
    raincoco閱讀 278評(píng)論 0 0
  • 簡(jiǎn)單來(lái)說(shuō)囱皿,瀏覽器緩存就是把一個(gè)已經(jīng)請(qǐng)求過(guò)的資源拷貝一份存儲(chǔ)起來(lái),當(dāng)下次需要該資源時(shí)忱嘹,瀏覽器會(huì)根據(jù)緩存機(jī)制決定直接使...
    淘淘笙悅閱讀 1,890評(píng)論 2 14
  • 瀏覽器緩存嘱腥,可以使得頁(yè)面加載速度提高,也減輕服務(wù)端壓力拘悦。瀏覽器緩存的過(guò)程(圖示): 有幾個(gè)比較重要點(diǎn)如下: 1. ...
    默默先生Alec閱讀 492評(píng)論 0 1
  • 瀏覽器緩存 瀏覽器緩存的知識(shí)是前端工程師必須要掌握的齿兔,因?yàn)檫@些知識(shí)直接影響到你的頁(yè)面的用戶體驗(yàn),影響到你的頁(yè)面的加...
    _Charles閱讀 498評(píng)論 0 3