淺析瀏覽器的緩存

HTTP緩存機制


當(dāng)用戶通過瀏覽器發(fā)起一個數(shù)據(jù)請求的時候,瀏覽器會通過以下幾步來獲取數(shù)據(jù):

  • 本地緩存階段:先在本地查找該數(shù)據(jù)拜英,如果有發(fā)現(xiàn)該數(shù)據(jù),而且該數(shù)據(jù)還沒有過期衣洁,就使用此數(shù)據(jù)虱肄,不會發(fā)送http請求到服務(wù)器
  • 協(xié)商緩存階段:如果在本地緩存找到對應(yīng)的數(shù)據(jù)致板,但是不知道該數(shù)據(jù)是否過期,則發(fā)一個HTTP請求到服務(wù)器咏窿,然后服務(wù)器判斷這個請求斟或,如果請求的數(shù)據(jù)在服務(wù)器上沒有改動過或過期,則返回304狀態(tài)碼(可以理解為服務(wù)器給瀏覽器的暗號)集嵌,讓瀏覽器在本地找到該數(shù)據(jù)
  • 緩存失敗階段:當(dāng)服務(wù)器發(fā)現(xiàn)請求的資源已經(jīng)修改過萝挤,或者這是一個新的請求,服務(wù)器則返回該數(shù)據(jù)根欧,并且返回200狀態(tài)碼怜珍, 此過程的前提是指找到該數(shù)據(jù),如果服務(wù)器上沒有數(shù)據(jù)咽块,則返回404(這個大家多見過吧绘面,就是平時見到404頁面時的狀態(tài)碼)

瀏覽器中的操作對緩存的影響


  • 強制刷新:當(dāng)按下ctrl+F5來刷新頁面的時候,瀏覽器將繞過各種緩存(本地緩存和協(xié)商緩存)侈沪, 直接讓服務(wù)器返回最新數(shù)據(jù)
  • 普通刷新:當(dāng)按下F5或者點擊刷新按鈕來刷新頁面的時候揭璃,瀏覽器將繞過本地緩存發(fā)送請求給服務(wù)器,此時協(xié)商緩存是有效的
  • 回車或跳轉(zhuǎn):當(dāng)在地址欄上輸入回車或者按下跳轉(zhuǎn)按鈕的時候亭罪,所有緩存都生效

WEB瀏覽器緩存


瀏覽器會緩存它瀏覽過的「資源」(包括網(wǎng)頁瘦馍,圖片等),如果資源在保質(zhì)期內(nèi)应役,那下次同樣的請求直接用緩存情组。過期之后,會帶上資源上次的修改時間箩祥,由服務(wù)器來判斷是否失效院崇,失效的話就會給瀏覽器返回新的數(shù)據(jù)并繼續(xù)緩存下來。

瀏覽器的緩存袍祖,存在用戶電腦的硬盤上底瓣,用戶每次使用瀏覽器讀取緩存時先將硬盤上的緩存數(shù)據(jù)加載到內(nèi)存中,再讀取給瀏覽器蕉陋。

瀏覽器端緩存的規(guī)則主要在HTTP協(xié)議頭和HTML的meta標(biāo)簽中定義捐凭。他們分別從新鮮度和校驗值兩個維度來規(guī)定瀏覽器是直接使用緩存中的數(shù)據(jù)拨扶,還是需要去源服務(wù)器獲取更新的版本。

新鮮度(過期機制):緩存數(shù)據(jù)保質(zhì)期茁肠。緩存數(shù)據(jù)必須滿足以下條件患民,瀏覽器會認為它是有效的,足夠新的:

  • 含有完整的過期時間控制頭信息(HTTP協(xié)議報文頭)垦梆,并且仍在有效期內(nèi)
  • 瀏覽器已經(jīng)使用過這個緩存數(shù)據(jù)匹颤,并且在上一次會話中(也就是用戶上一次訪問該數(shù)據(jù)時)已經(jīng)檢查過其新鮮度
    滿足以上兩個情況的一種,瀏覽器會直接從緩存中獲取緩存數(shù)據(jù)并渲染給瀏覽器奶赔。

校驗值(驗證機制):服務(wù)器返回數(shù)據(jù)的時候有時在頭信息中帶上這個資源的實體標(biāo)簽惋嚎,它可以用來作為瀏覽器再次請求過程的校驗標(biāo)識。如過發(fā)現(xiàn)校驗標(biāo)識不匹配站刑,說明數(shù)據(jù)已經(jīng)被修改或過期另伍,瀏覽器需要重新獲取數(shù)據(jù)內(nèi)容。


補充:
移動APP上的緩存機制和瀏覽器緩存的原理類似绞旅,APP與服務(wù)器交互的協(xié)議同樣是大多基于HTTP(S)摆尝。

APP端存儲數(shù)據(jù)的時候,會存儲很多字段內(nèi)容因悲,一般情況下后臺會給每條數(shù)據(jù)設(shè)定一個獨立的id值堕汞,那么前端在請求數(shù)據(jù)的可以先查詢本地緩存的數(shù)據(jù)中,最新的一條數(shù)據(jù)的id值晃琳,通過網(wǎng)絡(luò)請求讯检,把這個id值發(fā)給服務(wù)端,服務(wù)端會根據(jù)這個id在后臺服務(wù)器中查詢是否有比這個id值更大(更新)的數(shù)據(jù)存在卫旱,如果有就把新的數(shù)據(jù)返回給前端APP人灼。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市顾翼,隨后出現(xiàn)的幾起案子投放,更是在濱河造成了極大的恐慌,老刑警劉巖适贸,帶你破解...
    沈念sama閱讀 218,525評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件灸芳,死亡現(xiàn)場離奇詭異,居然都是意外死亡拜姿,警方通過查閱死者的電腦和手機烙样,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,203評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蕊肥,“玉大人谒获,你說我怎么就攤上這事。” “怎么了究反?”我有些...
    開封第一講書人閱讀 164,862評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長儒洛。 經(jīng)常有香客問我精耐,道長,這世上最難降的妖魔是什么琅锻? 我笑而不...
    開封第一講書人閱讀 58,728評論 1 294
  • 正文 為了忘掉前任卦停,我火速辦了婚禮,結(jié)果婚禮上恼蓬,老公的妹妹穿的比我還像新娘惊完。我一直安慰自己,他們只是感情好处硬,可當(dāng)我...
    茶點故事閱讀 67,743評論 6 392
  • 文/花漫 我一把揭開白布小槐。 她就那樣靜靜地躺著,像睡著了一般荷辕。 火紅的嫁衣襯著肌膚如雪凿跳。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,590評論 1 305
  • 那天疮方,我揣著相機與錄音控嗜,去河邊找鬼。 笑死骡显,一個胖子當(dāng)著我的面吹牛疆栏,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播惫谤,決...
    沈念sama閱讀 40,330評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼壁顶,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了石挂?” 一聲冷哼從身側(cè)響起博助,我...
    開封第一講書人閱讀 39,244評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎痹愚,沒想到半個月后富岳,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,693評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡拯腮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,885評論 3 336
  • 正文 我和宋清朗相戀三年窖式,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片动壤。...
    茶點故事閱讀 40,001評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡萝喘,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情阁簸,我是刑警寧澤爬早,帶...
    沈念sama閱讀 35,723評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站启妹,受9級特大地震影響筛严,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜饶米,卻給世界環(huán)境...
    茶點故事閱讀 41,343評論 3 330
  • 文/蒙蒙 一桨啃、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧檬输,春花似錦照瘾、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,919評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至逃默,卻和暖如春碳却,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背笑旺。 一陣腳步聲響...
    開封第一講書人閱讀 33,042評論 1 270
  • 我被黑心中介騙來泰國打工昼浦, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人筒主。 一個月前我還...
    沈念sama閱讀 48,191評論 3 370
  • 正文 我出身青樓关噪,卻偏偏與公主長得像,于是被迫代替她去往敵國和親乌妙。 傳聞我的和親對象是個殘疾皇子使兔,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,955評論 2 355

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

  • 一、前言 緩存可以說是性能優(yōu)化中簡單高效的一種優(yōu)化方式了藤韵。一個優(yōu)秀的緩存策略可以縮短網(wǎng)頁請求資源的距離虐沥,減少延遲,...
    浪里行舟閱讀 205,696評論 46 521
  • 一泽艘、前言 緩存可以說是性能優(yōu)化中簡單高效的一種優(yōu)化方式了欲险。一個優(yōu)秀的緩存策略可以縮短網(wǎng)頁請求資源的距離,減少延遲匹涮,...
    沉落的星星閱讀 385評論 0 0
  • 瀏覽器對于請求資源, 流程如圖所示: 可以看到瀏覽器的緩存機制分為兩個部分: 1天试、當(dāng)前緩存是否過期? 2然低、服務(wù)器中...
    zhoulujun閱讀 1,204評論 0 3
  • 來源: https://www.infoq.cn/article/8VU-VCrhoxducaFPrNOL 一喜每、前...
    AAA前端閱讀 265評論 0 2
  • 我們每個人在人生歷練的過程當(dāng)中都要完成兩個階段务唐。第一個階段我們要找到存在感,我們要告訴這個世界“我來過带兜,我活過”枫笛,...
    不是我本人閱讀 302評論 0 0