你真的弄懂了瀏覽器緩存嗎腾供?

緩存一直以來都是一個老生常談的問題仆邓,在工作和面試中都經(jīng)常會被問到,合理利用了緩存可以提高網(wǎng)站的訪問速度伴鳖,節(jié)省帶寬节值,減輕服務(wù)器壓力,增強(qiáng)用戶體驗榜聂。到底我們?nèi)粘9ぷ髦袝玫侥男┚彺婺兀?/p>

  • 數(shù)據(jù)庫緩存:就是將查詢的數(shù)據(jù)放到內(nèi)存中搞疗,下次查詢直接從內(nèi)存中讀取,提高查詢效率须肆。
  • CDN緩存匿乃。
  • 代理服務(wù)器緩存:瀏覽器和源服務(wù)器之間的中間服務(wù)器,運作原理跟HTTP緩存差不多豌汇,但是規(guī)模更大幢炸。
  • 瀏覽器緩存:每個瀏覽器都實現(xiàn)了HTTP緩存,我們今天的重點拒贱。
  • 應(yīng)用層緩存宛徊。
  • cookie,web storage等逻澳。

了解了我們?nèi)粘I钪谐S玫木彺鏅C(jī)制后(當(dāng)然還有更多)闸天,今天我們重點來學(xué)習(xí)下HTTP緩存,它可是面試過程中必問的問題斜做,想進(jìn)BAT的話号枕,必須把它啃透,廢話不多說陨享,直接進(jìn)入正題。

什么是瀏覽器緩存钝腺?

瀏覽器緩存是瀏覽器在本地磁盤對用戶最近請求過的文檔進(jìn)行存儲抛姑,當(dāng)訪問者再次訪問同一頁面時,瀏覽器就可以直接從本地磁盤加載文檔艳狐。
可能有同學(xué)會問是不是我們每次獲取資源都必須發(fā)送HTTP請求到服務(wù)器定硝?答案是不是地,這里就涉及到瀏覽器緩存的分類毫目。

瀏覽器緩存的分類

瀏覽器緩存分為兩大類:強(qiáng)緩存和協(xié)商緩存蔬啡。

強(qiáng)緩存就是不需要發(fā)送HTTP請求道服務(wù)器诲侮,直接從本地磁盤獲取緩存過的資源。它是利用HTTP響應(yīng)報文中的Expires和Cache-Control兩個字段來控制的箱蟆,用來表示資源的緩存時間沟绪。

Expires:該字段是HTTP/1.0時的規(guī)范,它的值是一個絕對時間的GMT格式的時間字符串空猜,如Expires: Mon, 06 Feb 2017 08:26:48 GMT绽慈。這個時間代表資源的失效時間,在此之間辈毯,即命中強(qiáng)緩存坝疼。但是它有一個明顯的缺點,當(dāng)客戶端與服務(wù)器時間出現(xiàn)較大偏差谆沃,就會出現(xiàn)混亂钝凶。

Cache-Control:為了解決Expires出現(xiàn)的問題,HTTP/1.1添加了Cache-Control唁影。主要是利用max-age來進(jìn)行判斷耕陷,它是一個相對時間,如Cache-Control:max-age=600夭咬,代表著資源的有效期是600秒(10分鐘)啃炸。除了max-age外,Cache-Control還有以下幾個常用的值:

  • no-cache:不適用強(qiáng)緩存卓舵。需要使用緩存協(xié)商南用。
  • no-store:禁止瀏覽器緩存,不適用強(qiáng)緩存和緩存協(xié)商掏湾,每次請求資源都需要發(fā)送HTTP到服務(wù)器裹虫,每次都需要下載完整的資源。
  • public:可以被所有的用戶緩存融击,包括客戶端和CDN等中間代理服務(wù)器筑公。
  • private:只允許客戶端緩存,不允許CDN等中間代理服務(wù)器對其緩存尊浪。

Cache-Control與Expires可以在服務(wù)端配置同時啟用匣屡,但是Cache-Control的優(yōu)先級高于Expires。

協(xié)商緩存需要由服務(wù)器來確定客戶端緩存資源是否可用拇涤。這主要涉及Header中兩組字段:Last-Modified/If-Modified-Since或ETag/If-None-Match捣作,這兩組字段都是成對出現(xiàn)的。若第一次的響應(yīng)頭沒有Last-Modified或ETag鹅士,則后續(xù)的請求頭部也不會有If-Modified-Since或If-None-Match券躁。

Last-Modified/If-Modified-Since:瀏覽器第一次請求一個資源的時候,服務(wù)器返回的header中會加上Last-Modified,它是一個時間標(biāo)識該資源的最后最后修改時間也拜。當(dāng)瀏覽器再次請求該資源時以舒,HTTP請求頭部會帶上If-Modified-Since,該值為上次響應(yīng)報文頭部的Last-Modified的值慢哈,服務(wù)器接收到If-Modified-Since蔓钟,會根據(jù)資源的最后修改時間來判斷是否命中協(xié)商緩存,如果命中岸军,返回304奋刽,并且不會返回Last-Modified和無響應(yīng)body。否則返回200艰赞。

ETag/If-None-Match:它們的值不是一個時間標(biāo)識佣谐,而是一個校驗碼。ETag可以保證每一個資源都是唯一的方妖,資源變化都會導(dǎo)致ETag變化狭魂,服務(wù)器根據(jù)接收到的If-None-Match來判斷是否命中協(xié)商緩存。但是當(dāng)服務(wù)器返回304的時候党觅,由于ETag重新生成過雌澄,響應(yīng)頭部也會帶上ETag,即使它跟之前的沒有變化杯瞻。

為什么要有ETag镐牺?不是已經(jīng)有Last-Modified嗎。

  • 一些文件或許會周期性的修改魁莉,但是它的內(nèi)容沒有變化(只是改變了修改時間)睬涧,這個時候我們并不希望客戶端認(rèn)為這個文件修改了,而重新獲取旗唁。
  • 某些文件在1秒內(nèi)修改了N次畦浓,用If-Modified-Since無法進(jìn)行區(qū)分。
  • 某些服務(wù)器不能精確的得到文件的最后修改時間检疫。
    Last-Modified和ETag可以一起使用讶请,但是ETag的優(yōu)先級大于Last-Modified,當(dāng)ETag相同的情況下屎媳,才會繼續(xù)比較Last-Modified夺溢,最后才決定是否返回304。

看了這么多不知道你糊涂沒烛谊,下面有兩張圖企垦,通過這兩張圖,你能對瀏覽器的緩存策略有一個新的認(rèn)識晒来。

第一次HTTP請求

第一次打開網(wǎng)站的時候,因為本地沒有緩存郑现,所以必須向服務(wù)器發(fā)起HTTP請求并下載所需資源湃崩,服務(wù)器返回的響應(yīng)報文頭部中可帶相關(guān)字段來表明采取何種緩存策略荧降。

再次HTTP請求

當(dāng)瀏覽器再次打開網(wǎng)站的時候,如果服務(wù)器設(shè)置了資源不可以緩存的的話(Cache-Control:no-store)則跟第一次HTTP請求一樣攒读;如果該資源可以被緩存朵诫,先判斷資源是否過期,即檢查Cache-Control:max-age或Expires薄扁,沒過期的話剪返,直接從本地緩存中讀取,過期的話則發(fā)送一個HTTP請求到服務(wù)器邓梅,服務(wù)器根據(jù)ETag和Last-Modified來決定返回304還是200脱盲。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市日缨,隨后出現(xiàn)的幾起案子钱反,更是在濱河造成了極大的恐慌,老刑警劉巖匣距,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件面哥,死亡現(xiàn)場離奇詭異,居然都是意外死亡毅待,警方通過查閱死者的電腦和手機(jī)尚卫,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來尸红,“玉大人吱涉,你說我怎么就攤上這事∈磺” “怎么了邑飒?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長级乐。 經(jīng)常有香客問我疙咸,道長,這世上最難降的妖魔是什么风科? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任撒轮,我火速辦了婚禮,結(jié)果婚禮上贼穆,老公的妹妹穿的比我還像新娘题山。我一直安慰自己,他們只是感情好故痊,可當(dāng)我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布顶瞳。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪慨菱。 梳的紋絲不亂的頭發(fā)上焰络,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天,我揣著相機(jī)與錄音符喝,去河邊找鬼闪彼。 笑死,一個胖子當(dāng)著我的面吹牛协饲,可吹牛的內(nèi)容都是我干的畏腕。 我是一名探鬼主播,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼茉稠,長吁一口氣:“原來是場噩夢啊……” “哼描馅!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起战惊,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤流昏,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后吞获,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體况凉,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年各拷,在試婚紗的時候發(fā)現(xiàn)自己被綠了刁绒。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡烤黍,死狀恐怖知市,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情速蕊,我是刑警寧澤嫂丙,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站规哲,受9級特大地震影響跟啤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜唉锌,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一隅肥、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧袄简,春花似錦腥放、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽候址。三九已至,卻和暖如春种柑,著一層夾襖步出監(jiān)牢的瞬間宗雇,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工莹规, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人泌神。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓良漱,卻偏偏與公主長得像,于是被迫代替她去往敵國和親欢际。 傳聞我的和親對象是個殘疾皇子母市,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,792評論 2 345

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

  • 轉(zhuǎn)載:瀏覽器緩存知識小結(jié)及應(yīng)用 閱讀目錄 1. 瀏覽器緩存基本認(rèn)識 2. 強(qiáng)緩存的原理 3. 強(qiáng)緩存的管理 4. ...
    meng_philip123閱讀 1,086評論 4 18
  • 淺談瀏覽器Http的緩存機(jī)制 ? ? ? ? ? ? ? ? 針對瀏覽器的http緩存的分析也算是老生常談了,每隔...
    meng_philip123閱讀 998評論 0 10
  • 瀏覽器緩存损趋,也就是客戶端緩存患久,既是網(wǎng)頁性能優(yōu)化里面靜態(tài)資源相關(guān)優(yōu)化的一大利器,也是無數(shù)web開發(fā)人員在工作過程不可...
    單純的土豆閱讀 405評論 0 1
  • 針對瀏覽器的http緩存的分析也算是老生常談了浑槽,每隔一段時間就會冒出一篇不錯的文章蒋失,其原理也是各大公司面試時幾乎必...
    單純的土豆閱讀 381評論 0 2
  • “首先,你會尷尬桐玻,證明你確實被抓到了把柄篙挽。那么為什么你總是能被抓到把柄呢?只能證明你總是會出問題镊靴。 其次铣卡,如果領(lǐng)導(dǎo)...
    圖抒館閱讀 180評論 0 0