瀏覽器緩存機(jī)制

瀏覽器通過(guò)HTTP頭部的字段來(lái)控制文件的緩存:要不要緩存以及緩存的過(guò)期時(shí)間

Cache-Control/Expires

Cache-Control和Expires控制文件的緩存既穆,在緩存文件的有效時(shí)間內(nèi)挽绩,瀏覽器直接使用本地文件灰殴,不與服務(wù)器交互涩搓。

Cache-Control的值是一個(gè)單位為秒的數(shù)字蛙紫,表示緩存文件的有效時(shí)間有多少秒拇派。
Expire的值是一個(gè)絕對(duì)時(shí)間點(diǎn)荷辕,表示緩存文件在某個(gè)時(shí)間點(diǎn)之前有效凿跳。

在Cache-Control和Expires同時(shí)存在的情況下,Cache-Control的優(yōu)先級(jí)高于Expires疮方。

下面舉例說(shuō)明:

  • Cache-Control: max-age=600

緩存文件的有效時(shí)長(zhǎng)為600秒控嗜。在接下來(lái)600s內(nèi),如果有請(qǐng)求這個(gè)資源的骡显,瀏覽器不會(huì)發(fā)出請(qǐng)求疆栏,而是直接使用本地緩存的文件。

  • Cache-Control: private

告訴瀏覽器不要緩存這個(gè)文件惫谤。

  • Expires: Mon, 24 Nov 2025 02:32:46 GMT

緩存文件在2025-11-24 02:32:46 GMT之前有效壁顶。

  • Expire: -1

告訴瀏覽器不要緩存這個(gè)文件。

Last-Modified/Etag

Last-Modified的值是一個(gè)絕對(duì)時(shí)間點(diǎn)溜歪,表示文件最近一次修改的時(shí)間若专。
Etag的值是一個(gè)文件的hash。

與上面的Cache-Control和Expire不同蝴猪,如果只使用Last-Modified/Etag對(duì)文件的緩存進(jìn)行控制调衰。那每次訪問(wèn)文件的時(shí)候,瀏覽器會(huì)向服務(wù)器發(fā)起304請(qǐng)求自阱,如果文件沒(méi)有被修改嚎莉,則使用本地文件,否則從服務(wù)器獲取文件沛豌。

當(dāng)Last-Modify或者Etag兩者有一個(gè)和服務(wù)器上的文件相同時(shí)趋箩,則瀏覽器認(rèn)為文件沒(méi)有更新,直接使用本地緩存文件加派。

例子:

  • Last-Modified: Thu, 21 Apr 2016 03:17:22 GMT

緩存文件的上次更新的時(shí)間是2016-04-21 03:17:22 GMT阁簸。

  • ETag: "27b7-5256d6aeaf7c0"

緩存文件的哈希值是27b7-5256d6aeaf7c0。

強(qiáng)制刷新

  • F5

強(qiáng)制使Cache-Control/Expires失效:Cache-Control: max-age=0
此時(shí)哼丈,如果文件還使用了Last-Modified/Etag進(jìn)行緩存控制启妹,則向服務(wù)器發(fā)起304請(qǐng)求。

  • Ctrl+F5

強(qiáng)制使上面兩種瀏覽器緩存失效:

Cache-Control:no-cache
Pragma:no-cache

利用瀏覽器緩存

理想的緩存機(jī)制應(yīng)該是這樣的:

  1. 緩存文件沒(méi)更新醉旦,盡可能使用緩存饶米,不用和服務(wù)器交互;
  2. 當(dāng)用戶刷新時(shí),盡可能減少瀏覽器和服務(wù)器之間的數(shù)據(jù)傳輸;
  3. 緩存文件有更新時(shí)纱昧,第一時(shí)間能使用到新的文件程奠;
  4. 緩存的文件要保持完整性,不使用被修改過(guò)的緩存文件输玷;
  5. 緩存的容量大小要能設(shè)置或控制,緩存文件不能因?yàn)榇鎯?chǔ)空間限制或過(guò)期被清除工育。

第4逃默,5屬于瀏覽器的內(nèi)部機(jī)制鹃愤,我們無(wú)法控制。

對(duì)于1完域,使用Cache-Control可以實(shí)現(xiàn)(Cache-Control的優(yōu)先級(jí)高于Expires)软吐。
對(duì)于2,使用Last-Modified或者Etag可以實(shí)現(xiàn)(兩者可以一起使用)吟税。
對(duì)于3凹耙,我們采用每次發(fā)布,在要緩存的資源文件名中加上版本號(hào)或文件MD5值字串的方法來(lái)實(shí)現(xiàn)(修改緩存文件的文件名)肠仪。

當(dāng)然肖抱,這里要注意一點(diǎn)就是“入口”文件(html文件)是被設(shè)置為不緩存的,如Google异旧,百度的html頁(yè)面:

www.google.com.hk
www.baidu.com
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末虐沥,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子泽艘,更是在濱河造成了極大的恐慌欲险,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件匹涮,死亡現(xiàn)場(chǎng)離奇詭異天试,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)然低,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門喜每,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人雳攘,你說(shuō)我怎么就攤上這事带兜。” “怎么了吨灭?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵刚照,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我喧兄,道長(zhǎng)无畔,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任吠冤,我火速辦了婚禮浑彰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘拯辙。我一直安慰自己郭变,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著诉濒,像睡著了一般周伦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上循诉,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音撇他,去河邊找鬼茄猫。 笑死,一個(gè)胖子當(dāng)著我的面吹牛困肩,可吹牛的內(nèi)容都是我干的划纽。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼锌畸,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼勇劣!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起潭枣,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤比默,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后盆犁,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體命咐,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年谐岁,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了醋奠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡伊佃,死狀恐怖窜司,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情航揉,我是刑警寧澤塞祈,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站帅涂,受9級(jí)特大地震影響织咧,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜漠秋,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一笙蒙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧庆锦,春花似錦捅位、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)尿扯。三九已至,卻和暖如春焰雕,著一層夾襖步出監(jiān)牢的瞬間衷笋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工矩屁, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留辟宗,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓吝秕,卻偏偏與公主長(zhǎng)得像泊脐,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子烁峭,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

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

  • 緩存一直是前端優(yōu)化的主戰(zhàn)場(chǎng), 利用好緩存就成功了一半. 本篇從http請(qǐng)求和響應(yīng)的頭域入手, 讓你對(duì)瀏覽器緩存有個(gè)...
    易斯大大閱讀 793評(píng)論 0 1
  • 瀏覽器緩存 瀏覽器緩存的知識(shí)是前端工程師必須要掌握的容客,因?yàn)檫@些知識(shí)直接影響到你的頁(yè)面的用戶體驗(yàn),影響到你的頁(yè)面的加...
    _Charles閱讀 510評(píng)論 0 3
  • 瀏覽器緩存约郁,可以使得頁(yè)面加載速度提高缩挑,也減輕服務(wù)端壓力。瀏覽器緩存的過(guò)程(圖示): 有幾個(gè)比較重要點(diǎn)如下: 1. ...
    默默先生Alec閱讀 497評(píng)論 0 1
  • 瀏覽器緩存機(jī)制鬓梅,其實(shí)主要就是HTTP協(xié)議定義的緩存機(jī)制(如:Expires调煎;Cache-control等)。但是也...
    raincoco閱讀 281評(píng)論 0 0
  • 瀏覽器緩存機(jī)制之一(經(jīng)典緩存) 因?yàn)樵诮邮值捻?xiàng)目中用到過(guò)比較新的HTML5應(yīng)用緩存己肮,也用到了經(jīng)典的緩存如設(shè)置max...
    __七把刀__閱讀 839評(píng)論 0 3