摘要:了解前端緩存是打造高性能網(wǎng)站的必要知識(shí)。這個(gè)表示,你的請(qǐng)求發(fā)送到后端,后端判斷并認(rèn)為資源可以繼續(xù)使用,直接使用本地緩存。盡可能的設(shè)置久緩存時(shí)間,通過碼來管理版本。參考鏈接淺談緩存權(quán)威指南上配置緩存首發(fā)地址
背景說明
緩存一直是前端性能優(yōu)化中,濃墨重彩的一筆。了解前端緩存是打造高性能網(wǎng)站的必要知識(shí)。
之前,對(duì)于緩存的認(rèn)知一直停留在看《HTTP權(quán)威指南》和一些相關(guān)帖子的深度,過了一段時(shí)間,又總是忘記,正好最近不是很忙,結(jié)合內(nèi)網(wǎng)上的一些參考資料,結(jié)合實(shí)踐,試著全面解析一下緩存以及其最佳實(shí)踐。
前后端交互中涉及到的緩存 前端我們?nèi)粘K娮疃嗟囊彩俏覀冏畛@玫木褪菫g覽器對(duì)于HTTP規(guī)范實(shí)現(xiàn)所進(jìn)行的資源緩存,HTTP規(guī)范中,定義了4個(gè)緩存相關(guān)的字段。
對(duì)HTTP感興趣的同學(xué)也可以看我對(duì)《HTTP權(quán)威指南》的閱讀筆記?!禜TTP權(quán)威指南》
Request Headers | Response Headers | 說明 |
---|---|---|
Expires | Expires | HTTP1.0中就開始支持的頭字段,采用相對(duì)服務(wù)器時(shí)間來定義,但是因?yàn)榉?wù)器與瀏覽器時(shí)間不一定一致,所以不完全可靠 |
Cache-Control | Cache-Control | HTTP1.1開始支持的字段,優(yōu)先級(jí)比expires高,但是目前來說通常兩者并存,采用絕對(duì)時(shí)間Cache-Control: max-age=60單位是秒 |
If-Modified-Since | Last-Modified | Last-Modified表示上一次更改時(shí)間,注:這里的更改并非狹義上必須對(duì)內(nèi)容進(jìn)行相應(yīng)的更改,哪怕是打開文件再直接進(jìn)行保存也會(huì)刷新該時(shí)間。 |
If-None-Match | Etag | Etag則是與內(nèi)容緊密相關(guān)的一個(gè)字段,是對(duì)文件內(nèi)容進(jìn)行Hash散列后得到的值(Hash會(huì)需要消耗一部分CPU時(shí)間),比Last-Modified可靠 |
以上是HTTP中關(guān)于緩存的頭字段,瀏覽器其實(shí)只是一個(gè)HTTP協(xié)議的代理client,在十幾年的發(fā)展中,為了滿足用戶,而不端增強(qiáng)自身功能,并加入了許多特性,最終成為我們看到的這個(gè)樣子,
正如QQ本身應(yīng)該只是一款即時(shí)通信工具,但現(xiàn)在也如此巨無霸。
正常情況下,我們只會(huì)對(duì)GET請(qǐng)求進(jìn)行緩存,當(dāng)然是否能對(duì)POST等其他類型的請(qǐng)求進(jìn)行緩存呢?
規(guī)范中指出,是可以的,只要設(shè)置了相應(yīng)的頭字段,即Cache-Control,Expires等。但這里其實(shí)意義不大,我們之所以要做緩存,是因?yàn)楫?dāng)前互聯(lián)網(wǎng)環(huán)境下,最影響性能,也就是最耗時(shí)的部分在于網(wǎng)絡(luò)傳輸,
在有限的帶寬下,如何提高性能?這里就是緩存施展拳腳的天地了。
后端的話,有兩種緩存,一種是存儲(chǔ)在disk硬盤中的,一種是存儲(chǔ)在內(nèi)存中的。相對(duì)來說,內(nèi)存緩存速度快,但是容易造成內(nèi)存泄漏,所以這部分需要慎重,需要良好的管理(聽說淘寶首頁就是H5頁面,為了提高性能,選擇常駐在內(nèi)存中以提高分發(fā)速度)。
后端的緩存主要是為了防止前端穿透到DB(databases),因?yàn)楹笈_(tái)主要的性能瓶頸大部分存在于查表,所以通過后端緩存,減少用戶請(qǐng)求直接穿透到DB這種情況的發(fā)生,從而提高性能。
本文以前端為主,后端因?yàn)椴⒉皇欠浅I(yè)的原因,僅簡(jiǎn)介如上,有興趣的朋友可以再進(jìn)行深入的研究。
注:瀏覽器的緩存也是基于disk,緩存在硬盤上。
前端緩存的套路正如前文所說,前端的核心在于上述的4個(gè)頭字段。
以常見的請(qǐng)求一個(gè)CSS樣式來說。
第一次請(qǐng)求
通常服務(wù)器會(huì)傳送這4個(gè)字段過來, 可能是4個(gè)都要,也可能一個(gè)字段也沒有。這里主要講解4個(gè)字段都存在的情況。
第二次請(qǐng)求
前端:首先,瀏覽器會(huì)檢查Cache-Control與Expires,有Cache-Control的情況下,以其為標(biāo)準(zhǔn),如果超時(shí),則向后端發(fā)送請(qǐng)求,請(qǐng)求中會(huì)帶上 If-Modified-Since,If-None-Match。
后臺(tái):后端服務(wù)器接收到請(qǐng)求之后,會(huì)對(duì)這兩個(gè)字段進(jìn)行對(duì)比,同樣以If-None-Match為標(biāo)準(zhǔn),沒有If-None-Match的情況下,比對(duì)If-Modified-Since,如果比對(duì)后發(fā)現(xiàn)文件沒有過期,即Etag沒有發(fā)生變化,或者Last-Modified與If-Modified-Since一致(只存在If-Modified-Since時(shí))。如果改變了,就會(huì)發(fā)送新的文件,反之,則直接返回304。
這里盜個(gè)圖
上面就是大致的請(qǐng)求流程。但是僅僅如此的話,距離真正的實(shí)踐還是有一些距離的。
瀏覽器提供的三種刷新方式我們之前假設(shè)的理想情況都是在第一種情況下,但是在現(xiàn)實(shí)場(chǎng)景中,不可能如規(guī)范那么如人意。所以瀏覽器提供了三種刷新方式。
url+enter或者a標(biāo)簽的超鏈接點(diǎn)擊,點(diǎn)擊前進(jìn)后退按鈕
F5刷新 或者 點(diǎn)擊刷新按鈕
ctrl+F5強(qiáng)制刷新
那么,這三種情況有什么區(qū)別呢?
第一種,其實(shí)就是我們理想的情況,特別注意一下,如果緩存沒有過期,借助于Chrome的Network,我們會(huì)發(fā)現(xiàn)狀態(tài)碼是200,因?yàn)檫@里并沒有向后端發(fā)起請(qǐng)求而是直接重現(xiàn)上次請(qǐng)求的結(jié)果,所以仍然是200,
唯一不同的是他的size欄并不是顯示他的大小,而是顯示from cache。
第二種,則會(huì)直接無視Cache-Control與Expires是否過期,而直接在requset headers中設(shè)置Cache-Control: max-age=0,直接向服務(wù)器發(fā)送請(qǐng)求。
服務(wù)器根據(jù)If-None-Match和If-Modified-Since進(jìn)行判斷是否過期。大多數(shù)情況下,我們對(duì)靜態(tài)資源設(shè)置時(shí)間比較久,很多沒有過期。這時(shí)候,我們就會(huì)看見許多304(另一種情況是過期后請(qǐng)求得到304)。
第三種,同樣直接無視Cache-Control與Expires是否過期,并且設(shè)置Cache-Control: no-cache,也不會(huì)發(fā)送If-None-Match和If-Modified-Since。服務(wù)器則必須返回新的資源。
如何開啟緩存設(shè)置既然知道緩存的好處,那么有哪些設(shè)置緩存的方式呢?主要有如下三種
配置apache或者ngix服務(wù)器,開啟相應(yīng)緩存模塊
后端代碼中動(dòng)態(tài)設(shè)置
前端HTML頁面meta標(biāo)簽
最省心省力的應(yīng)該是第一種,也是最為常用的一種方式,第二三種,只能說是對(duì)其進(jìn)行補(bǔ)充。
我的是在騰訊云上買的服務(wù)器,配置方式參加:ubuntu上配置apache緩存。
配置的指導(dǎo)思想
服務(wù)器配置主要針對(duì)對(duì)象是靜態(tài)資源,如圖片,css,js等。
通常對(duì)其進(jìn)行類型匹配,然后設(shè)置過期時(shí)間。比如照片的過期時(shí)間則是設(shè)置的越長越好,比如1個(gè)月,而CSS與JS腳本也可以設(shè)置的比較久一些,但是HTML腳本則萬萬不要設(shè)置緩存時(shí)間。
生產(chǎn)實(shí)踐中為了滿足盡可能的緩存久與版本更新的需求,通常會(huì)在構(gòu)建的時(shí)候打上MD5碼,因?yàn)樗徐o態(tài)資源都是通過HTML引入或者通過HTML頁面見解引入,所以只需要控制住HTML中的請(qǐng)求對(duì)應(yīng)更新版本即可
完美的達(dá)到上述要求。
第二種代碼如下
res.set("Cache-Control", "max-age=60000"); // node express
第三種代碼如下
Cache-Control
為了降低網(wǎng)絡(luò)鏈路的擁塞,在許多局域網(wǎng)中會(huì)設(shè)置許多的代理服務(wù)器,而這些代理服務(wù)器會(huì)緩存本局域網(wǎng)內(nèi)最常用的一些資源,并根據(jù)算法動(dòng)態(tài)的更新緩存的資源,以保持一定的命中率。
這里Cache-Control就有一個(gè)public,private的屬性值,默認(rèn)是public。public表示允許代理服務(wù)器對(duì)其內(nèi)容進(jìn)行緩存,這樣局域網(wǎng)內(nèi)的其他主機(jī)要是第一次進(jìn)行請(qǐng)求,如果在代理服務(wù)器上正好有相應(yīng)的資源則可以避免前往遙遠(yuǎn)的目標(biāo)服務(wù)器進(jìn)行請(qǐng)求并返回相應(yīng)的資源。當(dāng)然這里結(jié)合CDN的使用會(huì)更好。
消滅304304 Not Modified 性能優(yōu)化中,如果你經(jīng)常看到許多304(當(dāng)然,不包括你點(diǎn)擊按鈕這種刷新方式)。那么你該好好想想你設(shè)定的緩存時(shí)間是不是該延長一些了。
304這個(gè)表示,你的請(qǐng)求發(fā)送到后端,后端判斷并認(rèn)為資源可以繼續(xù)使用,直接使用本地緩存。但是這種方式下,雖然后端不會(huì)傳相應(yīng)的資源,但是請(qǐng)求的一來一回也是會(huì)花費(fèi)時(shí)間的。
并且給服務(wù)器一定的壓力,所以性能優(yōu)化中,有一條叫做 消滅304 。盡可能的設(shè)置久緩存時(shí)間,通過md5碼來管理版本。
淺談Web緩存
Is it possible to cache POST methods in HTTP?
《HTTP權(quán)威指南》
ubuntu上配置apache緩存
WilsonLiu"s blog首發(fā)地址:http://blog.wilsonliu.cn
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/61788.html
摘要:了解前端緩存是打造高性能網(wǎng)站的必要知識(shí)。這個(gè)表示,你的請(qǐng)求發(fā)送到后端,后端判斷并認(rèn)為資源可以繼續(xù)使用,直接使用本地緩存。盡可能的設(shè)置久緩存時(shí)間,通過碼來管理版本。參考鏈接淺談緩存權(quán)威指南上配置緩存首發(fā)地址 背景說明 緩存一直是前端性能優(yōu)化中,濃墨重彩的一筆。了解前端緩存是打造高性能網(wǎng)站的必要知識(shí)。 之前,對(duì)于緩存的認(rèn)知一直停留在看《HTTP權(quán)威指南》和一些相關(guān)帖子的深度,過了一段時(shí)...
摘要:了解前端緩存是打造高性能網(wǎng)站的必要知識(shí)。這個(gè)表示,你的請(qǐng)求發(fā)送到后端,后端判斷并認(rèn)為資源可以繼續(xù)使用,直接使用本地緩存。盡可能的設(shè)置久緩存時(shí)間,通過碼來管理版本。參考鏈接淺談緩存權(quán)威指南上配置緩存首發(fā)地址 背景說明 緩存一直是前端性能優(yōu)化中,濃墨重彩的一筆。了解前端緩存是打造高性能網(wǎng)站的必要知識(shí)。 之前,對(duì)于緩存的認(rèn)知一直停留在看《HTTP權(quán)威指南》和一些相關(guān)帖子的深度,過了一段時(shí)...
摘要:最近組件庫支持了,并且做了功能的升級(jí),文檔看這里下文不談?wù)撨@門技術(shù),我打算從組件的設(shè)計(jì)以及一些細(xì)節(jié)來談?wù)劷M件庫這件事。組件細(xì)節(jié)舉幾個(gè)例子來談?wù)劷M件設(shè)計(jì)和細(xì)節(jié)固釘當(dāng)滾動(dòng)條滑動(dòng),固釘元素劃出視界時(shí)候,我們希望它能仍然釘在那里,展示在視界內(nèi)。 最近組件庫 N3 支持了 vue 2.0 ,并且做了功能的升級(jí), 文檔看這里 https://n3-components.github.... 下文不...
摘要:最近組件庫支持了,并且做了功能的升級(jí),文檔看這里下文不談?wù)撨@門技術(shù),我打算從組件的設(shè)計(jì)以及一些細(xì)節(jié)來談?wù)劷M件庫這件事。組件細(xì)節(jié)舉幾個(gè)例子來談?wù)劷M件設(shè)計(jì)和細(xì)節(jié)固釘當(dāng)滾動(dòng)條滑動(dòng),固釘元素劃出視界時(shí)候,我們希望它能仍然釘在那里,展示在視界內(nèi)。 最近組件庫 N3 支持了 vue 2.0 ,并且做了功能的升級(jí), 文檔看這里 https://n3-components.github.... 下文不...
閱讀 3089·2021-11-25 09:43
閱讀 2266·2021-09-07 10:28
閱讀 3604·2021-08-11 11:14
閱讀 2788·2019-08-30 13:49
閱讀 3554·2019-08-29 18:41
閱讀 1174·2019-08-29 11:26
閱讀 1983·2019-08-26 13:23
閱讀 3382·2019-08-26 10:43