無標(biāo)題文章

瀏覽器緩存

200 from memory cache 不訪問服務(wù)器,直接讀緩存香罐,從內(nèi)存中讀取緩存。此時的數(shù)據(jù)時緩存到內(nèi)存中的时肿,當(dāng)kill進(jìn)程后,也就是瀏覽器關(guān)閉以后港粱,數(shù)據(jù)將不存在螃成。但是這種方式只能緩存派生資源

200 from disk cache 不訪問服務(wù)器,直接讀緩存查坪,從磁盤中讀取緩存寸宏,當(dāng)kill進(jìn)程時,數(shù)據(jù)還是存在偿曙。這種方式也只能緩存派生資源

304 Not Modified 訪問服務(wù)器氮凝,發(fā)現(xiàn)數(shù)據(jù)沒有更新,服務(wù)器返回此狀態(tài)碼望忆。然后從緩存中讀取數(shù)據(jù)罩阵。

三級緩存原理

  • 先去內(nèi)存看,如果有启摄,直接加載
  • 如果內(nèi)存沒有稿壁,擇取硬盤獲取,如果有直接加載
  • 如果硬盤也沒有歉备,那么就進(jìn)行網(wǎng)絡(luò)請求
  • 加載到的資源緩存到硬盤和內(nèi)存

一般瀏覽圖片傅是,如下流程:

  • 訪問-> 200 -> 退出瀏覽器
  • 再進(jìn)來-> 200(from disk cache) -> 刷新 -> 200(from memory cache)

application cache和上面緩存有點區(qū)別,是離線緩存,就是資源可以從硬盤上讀取而不用聯(lián)網(wǎng)喧笔,即使斷網(wǎng)帽驯,用戶也可以瀏覽。

設(shè)置瀏覽器緩存

304是協(xié)商緩存還是要和服務(wù)器通信一次书闸,要想斷絕服務(wù)器通信尼变,就要強制瀏覽器使用本地緩存(cache-control/expires),

一般有如下幾種方式設(shè)置瀏覽器緩存梗劫。

1享甸、通過HTTP的META設(shè)置expires和cache-control

<meta http-equiv="Cache-Control" content="max-age=7200" />
<meta http-equiv="Expires" content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)" />

2、apache服務(wù)器配置圖片梳侨,css蛉威,js,flash的緩存
這個主要通過服務(wù)器的配置來實現(xiàn)這個技術(shù)走哺,如果使用apache服務(wù)器的話蚯嫌,可以使用mod_expires模塊來實現(xiàn):
編譯mod_expires模塊:

Cd  /root/httpd-2.2.3/modules/metadata
/usr/local/apache/bin/apxs -i -a -c mod_expires.c //編譯

先打開httpd.conf文件,然后查找expires這個模塊丙躏,找到后择示,刪除左邊的#號,表示打這個模塊晒旅,并重啟apache服務(wù)器
編輯httpd.conf配置:添加下面內(nèi)容

<IfModule mod_expires.c>

ExpiresActive on

ExpiresDefault "access plus 1 month"

ExpiresByType text/html "access plus 1 months"

ExpiresByType text/css "access plus 1 months"

ExpiresByType image/gif "access plus 1 months"

ExpiresByType image/jpeg "access plus 1 months"

ExpiresByType image/jpg "access plus 1 months"

ExpiresByType image/png "access plus 1 months"

EXpiresByType application/x-shockwave-flash "access plus 1 months"

EXpiresByType application/x-javascript      "access plus 1 months"

#ExpiresByType video/x-flv "access plus 1 months"

</IfModule>

3栅盲、php等設(shè)置

<?php
  header("Cache-Control: public");
  header("Pragma: cache");

  $offset = 30*60*60*24; // cache 1 month
  $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
  header($ExpStr);
?>

或者

$seconds_to_cache = 3600;
$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";
header("Expires: $ts"); header("Pragma: cache");
header("Cache-Control: max-age=$seconds_to_cache");

緩存情況下前端代碼部署

  • 問題一:有了緩存,如何進(jìn)行前端代碼更新呢废恋?
    我們可以在資源文件或者圖片后面添加版本號谈秫,如下圖。

  • 問題二:但是所有文件都加了版本號之后鱼鼓,我們只更改了一個文件拟烫,其他文件的緩存不是浪費了嗎?**
    解決這個問題迄本,我們可以用 數(shù)據(jù)摘要要算法硕淑,對文件求摘要信息,摘要信息與文件內(nèi)容一一對應(yīng)嘉赎。如下圖:

  • 問題三:新的問題又來了置媳,文件發(fā)布怎么辦?
    1公条、先部署頁面半开,再部署資源:在二者部署的時間間隔內(nèi),如果有用戶訪問頁面赃份,就會在新的頁面結(jié)構(gòu)中加載舊的資源寂拆,并且把這個舊版本的資源當(dāng)做新版本緩存起來奢米,其結(jié)果就是:用戶訪問到了一個樣式錯亂的頁面,除非手動刷新纠永,否則在資源緩存過期之前鬓长,頁面會一直執(zhí)行錯誤。
    2尝江、先部署資源涉波,再部署頁面:在部署時間間隔之內(nèi),有舊版本資源本地緩存的用戶訪問網(wǎng)站炭序,由于請求的頁面是舊版本的啤覆,資源引用沒有改變,瀏覽器將直接使用本地緩存惭聂,這種情況下頁面展現(xiàn)正常窗声;但沒有本地緩存或者緩存過期的用戶訪問網(wǎng)站,就會出現(xiàn)舊版本頁面加載新版本資源的情況辜纲,導(dǎo)致頁面執(zhí)行錯誤笨觅,但當(dāng)頁面完成部署,這部分用戶再次訪問頁面又會恢復(fù)正常了耕腾。
    好的见剩,上面一坨分析想說的就是:先部署誰都不成!都會導(dǎo)致部署過程中發(fā)生頁面錯亂的問題扫俺。所以苍苞,訪問量不大的項目,可以讓研發(fā)同學(xué)苦逼一把狼纬,等到半夜偷偷上線柒啤,先上靜態(tài)資源,再部署頁面畸颅,看起來問題少一些。

  • 如何解決這些問題呢方援?
    這個問題没炒,起源于資源的 覆蓋式發(fā)布,用 待發(fā)布資源 覆蓋 已發(fā)布資源犯戏,就有這種問題送火。解決它也好辦,就是實現(xiàn) 非覆蓋式發(fā)布先匪,如下圖:

看上圖种吸,用文件的摘要信息來對資源文件進(jìn)行重命名,把摘要信息放到資源文件發(fā)布路徑中呀非,這樣坚俗,內(nèi)容有修改的資源就變成了一個新的文件發(fā)布到線上镜盯,不會覆蓋已有的資源文件。上線過程中猖败,先全量部署靜態(tài)資源速缆,再灰度部署頁面,整個問題就比較完美的解決了恩闻。

總結(jié)如下:

1艺糜、 配置超長時間的本地緩存 —— 節(jié)省帶寬,提高性能
2幢尚、采用內(nèi)容摘要作為緩存更新依據(jù) —— 精確的緩存控制
3破停、 靜態(tài)資源CDN部署 —— 優(yōu)化網(wǎng)絡(luò)請求
4、更資源發(fā)布路徑實現(xiàn)非覆蓋式發(fā)布 —— 平滑升級

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末尉剩,一起剝皮案震驚了整個濱河市真慢,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌边涕,老刑警劉巖晤碘,帶你破解...
    沈念sama閱讀 216,470評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異功蜓,居然都是意外死亡园爷,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3 392
  • 文/潘曉璐 我一進(jìn)店門式撼,熙熙樓的掌柜王于貴愁眉苦臉地迎上來童社,“玉大人,你說我怎么就攤上這事著隆∪怕ィ” “怎么了?”我有些...
    開封第一講書人閱讀 162,577評論 0 353
  • 文/不壞的土叔 我叫張陵美浦,是天一觀的道長弦赖。 經(jīng)常有香客問我,道長浦辨,這世上最難降的妖魔是什么蹬竖? 我笑而不...
    開封第一講書人閱讀 58,176評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮流酬,結(jié)果婚禮上币厕,老公的妹妹穿的比我還像新娘。我一直安慰自己芽腾,他們只是感情好旦装,可當(dāng)我...
    茶點故事閱讀 67,189評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著摊滔,像睡著了一般阴绢。 火紅的嫁衣襯著肌膚如雪店乐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,155評論 1 299
  • 那天旱函,我揣著相機與錄音响巢,去河邊找鬼。 笑死棒妨,一個胖子當(dāng)著我的面吹牛踪古,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播券腔,決...
    沈念sama閱讀 40,041評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼伏穆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了纷纫?” 一聲冷哼從身側(cè)響起枕扫,我...
    開封第一講書人閱讀 38,903評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎辱魁,沒想到半個月后烟瞧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,319評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡染簇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,539評論 2 332
  • 正文 我和宋清朗相戀三年参滴,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片锻弓。...
    茶點故事閱讀 39,703評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡砾赔,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出青灼,到底是詐尸還是另有隱情暴心,我是刑警寧澤,帶...
    沈念sama閱讀 35,417評論 5 343
  • 正文 年R本政府宣布杂拨,位于F島的核電站专普,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏弹沽。R本人自食惡果不足惜檀夹,卻給世界環(huán)境...
    茶點故事閱讀 41,013評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望贷币。 院中可真熱鬧,春花似錦亏狰、人聲如沸役纹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽促脉。三九已至辰斋,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間瘸味,已是汗流浹背宫仗。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留旁仿,地道東北人藕夫。 一個月前我還...
    沈念sama閱讀 47,711評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像枯冈,于是被迫代替她去往敵國和親毅贮。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,601評論 2 353

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

  • WebView·開車指南 2016-08-31BugDev 北京市東城區(qū)首席Bug布道師開山之作尘奏,一整月交通事故血...
    53c021c38a1d閱讀 828評論 0 1
  • spring官方文檔:http://docs.spring.io/spring/docs/current/spri...
    牛馬風(fēng)情閱讀 1,670評論 0 3
  • Java有哪四個核心技術(shù)炫加?首先瑰煎,我們要了解一下java核心技術(shù)的重要性,它可以幫助我們舉一反三俗孝、觸類旁通酒甸,有助于提...
    西西老師閱讀 1,063評論 0 4
  • 第三講作業(yè): 以《三言兩拍》中“二拍”的第一篇為標(biāo)尺,確定出自己的閱讀層次驹针,并據(jù)此制定一個閱讀套餐烘挫。(文言幾成+舊...
    d5f3dfca4443閱讀 191評論 1 1
  • 請允許我先按套路出牌來點危言聳聽的段子: 近年來,隨著建筑行業(yè)的迅速崛起柬甥,建筑表現(xiàn)產(chǎn)業(yè)越來越成為我國動畫多媒體產(chǎn)業(yè)...
    圖驢閱讀 270評論 0 0