瀏覽器緩存和壓縮優(yōu)化技術(shù)

一屡萤、HTTP緩存機(jī)制

高并發(fā)下只能通過提升服務(wù)器負(fù)載解決?
緩存只能做數(shù)據(jù)庫緩存捎拯?
啟用瀏覽器緩存

緩存分類
HTTP緩存模型中坤按,如果請求成功會有三種情況

  • 1毯欣、200 from cache:直接從本地緩存中獲取響應(yīng),最快速臭脓,最省流量酗钞,因?yàn)楦緵]有向服務(wù)器發(fā)送請求。
  • 2来累、304 Not Modified:協(xié)商緩存瀏覽器在本地沒有命中的情況下砚作,請求頭中發(fā)送一定的教驗(yàn)數(shù)據(jù)到服務(wù)端,如果服務(wù)端數(shù)據(jù)沒有改變?yōu)g覽器從本地緩存響應(yīng)佃扼,返回304偎巢。
    快速蔼夜,發(fā)送的數(shù)據(jù)很少兼耀,只返回一些基本的響應(yīng)頭信息,數(shù)據(jù)量很小求冷,不發(fā)送實(shí)際響應(yīng)體瘤运。
  • 3、200 OK:以上兩種緩存全部失敗匠题,服務(wù)器返回完整響應(yīng)拯坟。沒有用到緩存相對最慢。

常見狀態(tài)碼

狀態(tài)碼 說明
200 服務(wù)器成功返回網(wǎng)頁
301/2 永久/臨時重定向
304 Not Modified 未修改
307 重定向中保持原有的請求數(shù)據(jù)
404 請求的網(wǎng)頁不存在
503 服務(wù)器暫時不可用
500 服務(wù)器內(nèi)部錯誤

本地緩存
瀏覽器如果認(rèn)為本地緩存能使用韭山,不會去請求服務(wù)端郁季。
相關(guān)header
Pragma:HTTP1.0時代的冷溃,該字段被設(shè)置未no-cache時,會告知瀏覽器禁用本地緩存梦裂。
Expires:HTTP1.0時代的似枕,緩存過期時間。瀏覽器與服務(wù)器時間無法保持一致年柠,如果差距過大凿歼,就會影響緩存結(jié)果。
Cache-Control:HTTP1.1冗恨,緩存過期的時間間隔答憔。
優(yōu)先級 Pragma > Cache-Control > Expires

協(xié)商緩存
瀏覽器在本地沒有命中的情況下,請求頭中發(fā)送一定的教驗(yàn)數(shù)據(jù)到服務(wù)端掀抹,如果服務(wù)端數(shù)據(jù)沒有修改虐拓,瀏覽器使用本地緩存
相關(guān)header
Last—Moidfied
If-Modified-Since
ETag HTTP1.1推出,文件的指紋標(biāo)識符渴丸。
If-None-Matche:本地緩存失敗侯嘀,會攜帶此值去請求服務(wù)端

緩存策略的選擇
適合緩存的內(nèi)容
不變的圖像、js谱轨、css戒幔、可下載的內(nèi)容、媒體文件

建議使用協(xié)商緩存
HTML文件土童、經(jīng)常替換的圖片诗茎、經(jīng)常修改的js、

二献汗、Nginx配置緩存策略

add_header指令:添加狀態(tài)碼為2XX和3XX的響應(yīng)頭信息
add_header name value [awalys’];
可以設(shè)置Progma/Expires/Cache-Control敢订,可以繼承

本地緩存配置
expires指令:通知瀏覽器過期時長
expires time;
為負(fù)值時表示Cache-Control: no-cache
為正值或者0就表示Cache-Control:max-age=指定的時間

協(xié)商緩存配置
etag 默認(rèn)開啟

三、前端代碼和資源的壓縮

讓資源文件更小罢吃,傳輸更快
js楚午、css、圖片尿招、html
Gzip壓縮

  • js 去除空白符和注釋矾柜,替換長變量名
  • css類似js
  • html 不建議壓縮可以用Gzip壓縮
  • 圖片壓縮 tinypng jpegMini ImageOptim
  • Gzip壓縮 nginx配置 gzip on|off
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市就谜,隨后出現(xiàn)的幾起案子怪蔑,更是在濱河造成了極大的恐慌,老刑警劉巖丧荐,帶你破解...
    沈念sama閱讀 217,277評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件缆瓣,死亡現(xiàn)場離奇詭異,居然都是意外死亡虹统,警方通過查閱死者的電腦和手機(jī)弓坞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3 393
  • 文/潘曉璐 我一進(jìn)店門隧甚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人渡冻,你說我怎么就攤上這事呻逆。” “怎么了菩帝?”我有些...
    開封第一講書人閱讀 163,624評論 0 353
  • 文/不壞的土叔 我叫張陵咖城,是天一觀的道長。 經(jīng)常有香客問我呼奢,道長宜雀,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,356評論 1 293
  • 正文 為了忘掉前任握础,我火速辦了婚禮辐董,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘禀综。我一直安慰自己简烘,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評論 6 392
  • 文/花漫 我一把揭開白布定枷。 她就那樣靜靜地躺著孤澎,像睡著了一般。 火紅的嫁衣襯著肌膚如雪欠窒。 梳的紋絲不亂的頭發(fā)上覆旭,一...
    開封第一講書人閱讀 51,292評論 1 301
  • 那天,我揣著相機(jī)與錄音岖妄,去河邊找鬼型将。 笑死,一個胖子當(dāng)著我的面吹牛荐虐,可吹牛的內(nèi)容都是我干的七兜。 我是一名探鬼主播,決...
    沈念sama閱讀 40,135評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼福扬,長吁一口氣:“原來是場噩夢啊……” “哼腕铸!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起忧换,我...
    開封第一講書人閱讀 38,992評論 0 275
  • 序言:老撾萬榮一對情侶失蹤恬惯,失蹤者是張志新(化名)和其女友劉穎向拆,沒想到半個月后亚茬,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,429評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡浓恳,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評論 3 334
  • 正文 我和宋清朗相戀三年刹缝,在試婚紗的時候發(fā)現(xiàn)自己被綠了碗暗。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,785評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡梢夯,死狀恐怖言疗,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情颂砸,我是刑警寧澤噪奄,帶...
    沈念sama閱讀 35,492評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站人乓,受9級特大地震影響勤篮,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜色罚,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評論 3 328
  • 文/蒙蒙 一碰缔、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧戳护,春花似錦金抡、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至铺董,卻和暖如春统捶,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背柄粹。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1 269
  • 我被黑心中介騙來泰國打工喘鸟, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人驻右。 一個月前我還...
    沈念sama閱讀 47,891評論 2 370
  • 正文 我出身青樓什黑,卻偏偏與公主長得像,于是被迫代替她去往敵國和親堪夭。 傳聞我的和親對象是個殘疾皇子愕把,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評論 2 354

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

  • 瀏覽器緩存和壓縮優(yōu)化技術(shù) 啟用瀏覽器緩存 http緩存模型中,如果請求成功會有三種情況 200 from cach...
    謝凌閱讀 325評論 0 0
  • 瀏覽器對于請求資源, 流程如圖所示: 可以看到瀏覽器的緩存機(jī)制分為兩個部分: 1森爽、當(dāng)前緩存是否過期恨豁? 2、服務(wù)器中...
    zhoulujun閱讀 1,201評論 0 3
  • 一爬迟、前言 緩存可以說是性能優(yōu)化中簡單高效的一種優(yōu)化方式了橘蜜。一個優(yōu)秀的緩存策略可以縮短網(wǎng)頁請求資源的距離,減少延遲,...
    浪里行舟閱讀 205,633評論 46 521
  • 參考《深入理解瀏覽器的緩存機(jī)制》進(jìn)行整理 前言 緩存可以說是性能優(yōu)化中簡單高效的一種優(yōu)化方式了计福。一個優(yōu)秀的緩存策略...
    琢磨先生lf閱讀 740評論 1 1
  • 一直有愛好寫日記的習(xí)慣跌捆,但不寫也就疏忽了。昨天想好的主題說忘就忘記了象颖,果然打了麻醉是有影響的佩厚,曾經(jīng)還蠻自豪自己的記...
    生命的赤道閱讀 141評論 0 0