背景說(shuō)明

緩存一直是前端性能優(yōu)化中，濃墨重彩的一筆。了解前端緩存是打造高性能網(wǎng)站的必要知識(shí)。

之前，對(duì)于緩存的認(rèn)知一直停留在看《HTTP權(quán)威指南》和一些相關(guān)帖子的深度，過(guò)了一段時(shí)間，又總是忘記，正好最近不是很忙，結(jié)合內(nèi)網(wǎng)上的一些參考資料，結(jié)合實(shí)踐，試著全面解析一下緩存以及其***實(shí)踐。

前后端交互中涉及到的緩存

前端

我們?nèi)粘Ｋ?jiàn)最多的也是我們最常利用的就是瀏覽器對(duì)于HTTP規(guī)范實(shí)現(xiàn)所進(jìn)行的資源緩存，HTTP規(guī)范中，定義了4個(gè)緩存相關(guān)的字段。

對(duì)HTTP感興趣的同學(xué)也可以看我對(duì)《HTTP權(quán)威指南》的閱讀筆記?！禜TTP權(quán)威指南》

以上是HTTP中關(guān)于緩存的頭字段，瀏覽器其實(shí)只是一個(gè)HTTP協(xié)議的代理client，在十幾年的發(fā)展中，為了滿足用戶，而不端增強(qiáng)自身功能，并加入了許多特性，最終成為我們看到的這個(gè)樣子，

正如QQ本身應(yīng)該只是一款即時(shí)通信工具，但現(xiàn)在也如此巨無(wú)霸。

正常情況下，我們只會(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ì)來(lái)說(shuō)，內(nèi)存緩存速度快，但是容易造成內(nèi)存泄漏，所以這部分需要慎重，需要良好的管理(聽(tīng)說(shuō)淘寶首頁(yè)就是H5頁(yè)面，為了提高性能，選擇常駐在內(nèi)存中以提高分發(fā)速度)。

后端的緩存主要是為了防止前端穿透到DB(databases)，因?yàn)楹笈_(tái)主要的性能瓶頸大部分存在于查表，所以通過(guò)后端緩存，減少用戶請(qǐng)求直接穿透到DB這種情況的發(fā)生，從而提高性能。

本文以前端為主，后端因?yàn)椴⒉皇欠浅I(yè)的原因，僅簡(jiǎn)介如上，有興趣的朋友可以再進(jìn)行深入的研究。

注：瀏覽器的緩存也是基于disk，緩存在硬盤上。

前端緩存的套路

正如前文所說(shuō)，前端的核心在于上述的4個(gè)頭字段。

以常見(jiàn)的請(qǐng)求一個(gè)CSS樣式來(lái)說(shuō)。

***次請(qǐng)求

通常服務(wù)器會(huì)傳送這4個(gè)字段過(guò)來(lái)， 可能是4個(gè)都要，也可能一個(gè)字段也沒(méi)有。這里主要講解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)，沒(méi)有If-None-Match的情況下,比對(duì)If-Modified-Since，如果比對(duì)后發(fā)現(xiàn)文件沒(méi)有過(guò)期，即Etag沒(méi)有發(fā)生變化，或者Last-Modified與If-Modified-Since一致(只存在If-Modified-Since時(shí))。如果改變了，就會(huì)發(fā)送新的文件，反之，則直接返回304。

這里盜個(gè)圖

上面就是大致的請(qǐng)求流程。但是僅僅如此的話，距離真正的實(shí)踐還是有一些距離的。

瀏覽器提供的三種刷新方式

我們之前假設(shè)的理想情況都是在***種情況下，但是在現(xiàn)實(shí)場(chǎng)景中，不可能如規(guī)范那么如人意。所以瀏覽器提供了三種刷新方式。

1. url+enter或者a標(biāo)簽的超鏈接點(diǎn)擊,點(diǎn)擊前進(jìn)后退按鈕
2. F5刷新 或者 點(diǎn)擊刷新按鈕
3. ctrl+F5強(qiáng)制刷新

那么，這三種情況有什么區(qū)別呢?

***種，其實(shí)就是我們理想的情況，特別注意一下，如果緩存沒(méi)有過(guò)期，借助于Chrome的Network，我們會(huì)發(fā)現(xiàn)狀態(tài)碼是200，因?yàn)檫@里并沒(méi)有向后端發(fā)起請(qǐng)求而是直接重現(xiàn)上次請(qǐng)求的結(jié)果，所以仍然是200，

唯一不同的是他的size欄并不是顯示他的大小，而是顯示from cache。

第二種，則會(huì)直接無(wú)視Cache-Control與Expires是否過(guò)期，而直接在requset headers中設(shè)置Cache-Control: max-age=0,直接向服務(wù)器發(fā)送請(qǐng)求。

服務(wù)器根據(jù)If-None-Match和If-Modified-Since進(jìn)行判斷是否過(guò)期。大多數(shù)情況下，我們對(duì)靜態(tài)資源設(shè)置時(shí)間比較久，很多沒(méi)有過(guò)期。這時(shí)候，我們就會(huì)看見(jiàn)許多304(另一種情況是過(guò)期后請(qǐng)求得到304)。

第三種，同樣直接無(wú)視Cache-Control與Expires是否過(guò)期，并且設(shè)置Cache-Control： no-cache,也不會(huì)發(fā)送If-None-Match和If-Modified-Since。服務(wù)器則必須返回新的資源。

如何開(kāi)啟緩存設(shè)置

既然知道緩存的好處，那么有哪些設(shè)置緩存的方式呢?主要有如下三種

1. 配置apache或者ngix服務(wù)器，開(kāi)啟相應(yīng)緩存模塊
2. 后端代碼中動(dòng)態(tài)設(shè)置
3. 前端HTML頁(yè)面meta標(biāo)簽

最省心省力的應(yīng)該是***種，也是最為常用的一種方式，第二三種，只能說(shuō)是對(duì)其進(jìn)行補(bǔ)充。

我的是在騰訊云上買的服務(wù)器，配置方式參加:ubuntu上配置apache緩存。

配置的指導(dǎo)思想

服務(wù)器配置主要針對(duì)對(duì)象是靜態(tài)資源，如圖片，css，js等。

通常對(duì)其進(jìn)行類型匹配，然后設(shè)置過(guò)期時(shí)間。比如照片的過(guò)期時(shí)間則是設(shè)置的越長(zhǎng)越好，比如1個(gè)月，而CSS與JS腳本也可以設(shè)置的比較久一些，但是HTML腳本則萬(wàn)萬(wàn)不要設(shè)置緩存時(shí)間。

生產(chǎn)實(shí)踐中為了滿足盡可能的緩存久與版本更新的需求，通常會(huì)在構(gòu)建的時(shí)候打上MD5碼，因?yàn)樗徐o態(tài)資源都是通過(guò)HTML引入或者通過(guò)HTML頁(yè)面見(jiàn)解引入，所以只需要控制住HTML中的請(qǐng)求對(duì)應(yīng)更新版本即可

***的達(dá)到上述要求。

第二種代碼如下

res.set('Cache-Control', 'max-age=60000'); // node express 

第三種代碼如下

<meta http-equiv="cache-control" content="max-age=60000" /> 
 
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> 

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ì)更好。

消滅304

304 Not Modified 性能優(yōu)化中，如果你經(jīng)?？吹皆S多304(當(dāng)然，不包括你點(diǎn)擊按鈕這種刷新方式)。那么你該好好想想你設(shè)定的緩存時(shí)間是不是該延長(zhǎng)一些了。

304這個(gè)表示，你的請(qǐng)求發(fā)送到后端，后端判斷并認(rèn)為資源可以繼續(xù)使用，直接使用本地緩存。但是這種方式下，雖然后端不會(huì)傳相應(yīng)的資源，但是請(qǐng)求的一來(lái)一回也是會(huì)花費(fèi)時(shí)間的。

并且給服務(wù)器一定的壓力，所以性能優(yōu)化中，有一條叫做 消滅304 。盡可能的設(shè)置久緩存時(shí)間，通過(guò)md5碼來(lái)管理版本。