HTTP緩存

緩存控制Cache-Control

Cache-Control是Web性能優(yōu)化的一種,能加速HTTP請求與響應(yīng)链蕊。

服務(wù)器中設(shè)置響應(yīng)頭:

response.setHeader('Cache-Control', 'max-age=30')

30秒內(nèi)不會再次請求瀏覽器從內(nèi)存中把請求的內(nèi)容拿給你敦锌。

例如馒疹,向服務(wù)器請求一個很大的main.js文件,下載這個文件需要較長時間乙墙,服務(wù)器在返回文件的同時在響應(yīng)頭中設(shè)置Cache-Control: max-age=30颖变。30秒內(nèi)再次請求同樣的URL生均,瀏覽器不會再次發(fā)起請求,而是直接從內(nèi)存中返回上次的main.js文件腥刹,這樣就節(jié)約了再次下載文件的時間马胧。30秒后再次請求這個main.js,服務(wù)器返回文件的同時再次設(shè)置Cache-Control衔峰,如此重復(fù)漓雅。

Cache-Control MDN

如何更新緩存

一般設(shè)置Cache-Control的時間都會很久,比如一年朽色,十年,盡量不再發(fā)請求组题。那么會有一個問題:如果頁面有更新葫男,用戶沒有辦法獲取最新的版本。

所以入口處(首頁崔列,html)不能設(shè)置Cache-Control梢褐。
如果全都設(shè)置了Cache-Control,用戶每次訪問都直接從內(nèi)存中讀取內(nèi)容赵讯,不會向服務(wù)器發(fā)起任何請求盈咳,獲取不到更新。
而留著入口不用緩存边翼,每次請求首頁都向服務(wù)器發(fā)起請求鱼响,如果其他文件有更新,就在入口處把URL變一下(不改變請求路徑组底,例如加一個查詢參數(shù))丈积,這樣瀏覽器就不會使用緩存,而是下載最新的版本债鸡,再把新版本緩存下來江滨。

改變URL,例如厌均,加一個查詢參數(shù):

<link rel="stylesheet" href="./css/default.css">
//更新唬滑,變成
<link rel="stylesheet" href="./css/default.css/?v=2">
//再更新
<link rel="stylesheet" href="./css/default.css/?v=3">

上面代碼還是在訪問/css,但是URL不是以前的URL了棺弊,所以瀏覽器不會使用緩存晶密,而是下載新的css。

Expires

Expires頭制定了一個日期/時間镊屎,在這個日期/時間之后惹挟,HTTP響應(yīng)被認(rèn)為是過時的,不再用緩存缝驳,重新請求连锯。

如果還設(shè)置了"max-age"或"s-max-age"指令的Cache-Control響應(yīng)頭归苍,那么Expires頭就會被忽略。

Cache-Control是設(shè)置多長時間后過期运怖,是一個時間長度拼弃;
Expires是設(shè)置什么時候過期,是一個時間點(diǎn)摇展。

但是Expires設(shè)置的時間點(diǎn)指的是本地時間吻氧,如果用戶本地時間錯亂就會出問題。

ETag

首先了解一下MD5咏连。
MD5是一種摘要算法盯孙,用于確保信息傳輸完整一致。
簡單來說祟滴,MD5把信息變成一個字符串振惰,信息傳輸后再次用MD5解析,任何一點(diǎn)變化都會生成一個不同的字符串垄懂,且內(nèi)容差異越小骑晶,生成的結(jié)果差異越大,把微小的差異放大草慧。
MD5

ETag HTTP響應(yīng)頭是資源特定版本標(biāo)識符桶蛔。
把文件的MD5放到ETag里設(shè)置響應(yīng)頭:

let fileMd5 = md5(string)
response.setHeader('ETag', fileMd5)

在請求這個文件時,響應(yīng)頭里有了ETag: Md5的值漫谷,
再次請求同意個文件時仔雷,請求頭里帶著If-None-Match: Md5值
也就是再次請求時帶著一個版本號(Md5的值)抖剿,如果版本號與上次相同朽寞,說明文件沒有更新,不需要重新下載斩郎。

let fileMd5 = md5(string)
response.setHeader('ETag', fileMd5)
if(request.headers['If-None-Match'] === fileMd5){
    //沒有響應(yīng)體
    response.statusCode = 304 //Not Modefied
}else{
    //有響應(yīng)體
    response.write(string)
}

ETag MDN

用Cache-Control直接不發(fā)請求脑融,
用ETag,要發(fā)請求缩宜,如果MD5一樣肘迎,不下載。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末锻煌,一起剝皮案震驚了整個濱河市妓布,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌宋梧,老刑警劉巖匣沼,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異捂龄,居然都是意外死亡释涛,警方通過查閱死者的電腦和手機(jī)加叁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來唇撬,“玉大人它匕,你說我怎么就攤上這事〗讶希” “怎么了豫柬?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長扑浸。 經(jīng)常有香客問我烧给,道長,這世上最難降的妖魔是什么喝噪? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任创夜,我火速辦了婚禮,結(jié)果婚禮上仙逻,老公的妹妹穿的比我還像新娘。我一直安慰自己涧尿,他們只是感情好系奉,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著姑廉,像睡著了一般缺亮。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上桥言,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天萌踱,我揣著相機(jī)與錄音,去河邊找鬼号阿。 笑死并鸵,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的扔涧。 我是一名探鬼主播园担,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼枯夜!你這毒婦竟也來了弯汰?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤湖雹,失蹤者是張志新(化名)和其女友劉穎咏闪,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體摔吏,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡鸽嫂,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年纵装,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片溪胶。...
    茶點(diǎn)故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡搂擦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出哗脖,到底是詐尸還是另有隱情瀑踢,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布才避,位于F島的核電站橱夭,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏桑逝。R本人自食惡果不足惜棘劣,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望楞遏。 院中可真熱鬧茬暇,春花似錦、人聲如沸寡喝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽预鬓。三九已至巧骚,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間格二,已是汗流浹背劈彪。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留顶猜,地道東北人沧奴。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像长窄,于是被迫代替她去往敵國和親扼仲。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評論 2 345

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

  • 本文內(nèi)容大多參考《圖解HTTP》一書 一. 認(rèn)識代理服務(wù)器 所以講緩存為什么要先扯代理服務(wù)器抄淑?別急屠凶,讓我們看一下一...
    流光號船長閱讀 1,900評論 0 10
  • 網(wǎng)絡(luò)特有的延遲以及數(shù)據(jù)傳輸?shù)某杀荆萍s互聯(lián)網(wǎng)快速獲取Web資源肆资。為此矗愧,HTTP協(xié)議引入緩存以空間換時間,使瀏覽器緩...
    大頭8086閱讀 3,056評論 2 12
  • 本文主要學(xué)習(xí)一下一些高級的HTTP知識,例如Session LocalStorage Cache-Control ...
    吳少在coding閱讀 1,284評論 0 3
  • 每個瀏覽器都自帶了 HTTP 緩存實(shí)現(xiàn)功能唉韭。您只需要確保每個服務(wù)器響應(yīng)都提供正確的 HTTP 標(biāo)頭指令夜涕,以指示瀏覽...
    _july77閱讀 280評論 0 0
  • 重點(diǎn)參考: 瀏覽器 HTTP 協(xié)議緩存機(jī)制詳解 https://www.cnblogs.com/520yang/a...
    Kevin_Junbaozi閱讀 436評論 0 1