web緩存

在前端開發(fā)中覆享,性能一直都是被大家所重視的一點荚板,然而判斷一個網站的性能最直觀的就是看網頁打開的速度。其中提高網頁反應速度的一個方式就是使用緩存。一個優(yōu)秀的緩存策略可以縮短網頁請求資源的距離迹卢,減少延遲蓬衡,并且由于緩存文件可以重復利用,還可以減少帶寬瓷们,降低網絡負荷攒钳。那么下面我們就來看看服務器端緩存的原理。

緩存分類

web緩存分為很多種,比如數據庫緩存、代理服務器緩存、還有我們熟悉的CDN緩存兔仰,以及瀏覽器緩存榕吼。來看看下圖:


image
下面我就來著重講下傳說中的瀏覽器緩存顽素。

瀏覽器緩存

頁面的緩存狀態(tài)是由header決定的段审,header的參數有四種

Cache-Control

  1. max-age(單位為s)指定設置緩存最大的有效時間,定義的是時間長短。當瀏覽器向服務器發(fā)送請求后,在max-age這段時間里瀏覽器就不會再向服務器發(fā)送請求了。


    image
  2. s-maxage(單位為s)同max-age顿天,只用于共享緩存(比如CDN緩存)。
    比如排抬,當s-maxage=60時侵贵,在這60秒中,即使更新了CDN的內容,瀏覽器也不會進行請求。也就是說max-age用于普通緩存,而s-maxage用于代理緩存骚腥。如果存在s-maxage契沫,則會覆蓋掉max-age和Expires header靶病。

  3. public 指定響應會被緩存,并且在多用戶間共享木张。也就是下圖的意思。


    public

    如果沒有指定public還是private然痊,則默認為public矗钟。

  4. private 響應只作為私有的緩存(見下圖),不能在用戶間共享。如果要求HTTP認證,響應會自動設置為private。


    private
  5. no-cache 指定不緩存響應整以,表明資源不進行緩存,比如:


    no-cache

    但是設置了no-cache之后并不代表瀏覽器不緩存恶迈,而是在緩存前要向服務器確認資源是否被更改奈附。因此有的時候只設置no-cache防止緩存還是不夠保險,還可以加上private指令,將過期時間設為過去的時間。

  6. no-store 絕對禁止緩存,一看就知道如果用了這個命令當然就是不會進行緩存啦~每次請求資源都要從服務器重新獲取舆逃。

  7. must-revalidate指定如果頁面是過期的,則去服務器進行獲取。這個指令并不常用树枫,就不做過多的討論了搔涝。

Expires

緩存過期時間臼婆,用來指定資源到期的時間颁独,是服務器端的具體的時間點靠柑。也就是說隔嫡,Expires=max-age + 請求時間庆揪,需要和Last-modified結合使用。但在上面我們提到過,cache-control的優(yōu)先級更高找前。 Expires是Web服務器響應消息頭字段槽惫,在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩存取數據项贺,而無需再次請求啥箭。


Expires

Last-modified

服務器端文件的最后修改時間绊茧,需要和cache-control共同使用侣夷,是檢查服務器端資源是否更新的一種方式决帖。當瀏覽器再次進行請求時落君,會向服務器傳送If-Modified-Since報頭焙蚓,詢問Last-Modified時間點之后資源是否被修改過。如果沒有修改,則返回碼為304,使用緩存何吝;如果修改過,則再次去服務器請求資源,返回碼和首次請求相同為200岖寞,資源為服務器最新資源藻雪。
如下圖,最后修改時間為2014年12月19日星期五2點50分47秒


Last-modified

ETag

根據實體內容生成一段hash字符串晋渺,標識資源的狀態(tài),由服務端產生。瀏覽器會將這串字符串傳回服務器星立,驗證資源是否已經修改胧沫,如果沒有修改,過程如下:


ETag驗證圖

使用ETag可以解決Last-modified存在的一些問題:

  1. 某些服務器不能精確得到資源的最后修改時間词爬,這樣就無法通過最后修改時間判斷資源是否更新
  2. 如果資源修改非常頻繁,在秒以下的時間內進行修改,而Last-modified只能精確到秒
  3. 一些資源的最后修改時間改變了泌类,但是內容沒改變底燎,使用ETag就認為資源還是沒有修改的殊校。

使用緩存流程

還是用圖說話,下面是我所總結的從瀏覽器請求到展示資源的過程:


緩存流程

cache-control指令使用

說了那么多cache-control的指令,那么如何選擇使用哪些指令呢?


ache-control
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末允瞧,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子艺配,更是在濱河造成了極大的恐慌原朝,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件茂蚓,死亡現場離奇詭異壕鹉,居然都是意外死亡,警方通過查閱死者的電腦和手機聋涨,發(fā)現死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進店門晾浴,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人牍白,你說我怎么就攤上這事脊凰。” “怎么了茂腥?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵狸涌,是天一觀的道長。 經常有香客問我最岗,道長帕胆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任仑性,我火速辦了婚禮惶楼,結果婚禮上,老公的妹妹穿的比我還像新娘诊杆。我一直安慰自己,他們只是感情好何陆,可當我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布晨汹。 她就那樣靜靜地躺著,像睡著了一般贷盲。 火紅的嫁衣襯著肌膚如雪淘这。 梳的紋絲不亂的頭發(fā)上剥扣,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天,我揣著相機與錄音铝穷,去河邊找鬼钠怯。 笑死,一個胖子當著我的面吹牛曙聂,可吹牛的內容都是我干的晦炊。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼宁脊,長吁一口氣:“原來是場噩夢啊……” “哼断国!你這毒婦竟也來了?” 一聲冷哼從身側響起榆苞,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤稳衬,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后坐漏,有當地人在樹林里發(fā)現了一具尸體薄疚,經...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年赊琳,在試婚紗的時候發(fā)現自己被綠了输涕。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡慨畸,死狀恐怖莱坎,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情寸士,我是刑警寧澤檐什,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站弱卡,受9級特大地震影響乃正,放射性物質發(fā)生泄漏。R本人自食惡果不足惜婶博,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一瓮具、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧凡人,春花似錦名党、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至岸晦,卻和暖如春欧啤,著一層夾襖步出監(jiān)牢的瞬間睛藻,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工邢隧, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留店印,地道東北人。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓倒慧,卻偏偏與公主長得像按摘,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子迫靖,可洞房花燭夜當晚...
    茶點故事閱讀 44,979評論 2 355