前端緩存分為HTTP緩存和瀏覽器緩存

其中HTTP緩存是在HTTP請(qǐng)求傳輸時(shí)用到的緩存，主要在服務(wù)器代碼上設(shè)置；而瀏覽器緩存則主要由前端開發(fā)在前端js上進(jìn)行設(shè)置。

緩存可以說是性能優(yōu)化中簡單高效的一種優(yōu)化方式了。一個(gè)優(yōu)秀的緩存策略可以縮短網(wǎng)頁請(qǐng)求資源的距離，減少延遲，并且由于緩存文件可以重復(fù)利用，還可以減少帶寬，降低網(wǎng)絡(luò)負(fù)荷。

????????對(duì)于一個(gè)數(shù)據(jù)請(qǐng)求來說，可以分為發(fā)起網(wǎng)絡(luò)請(qǐng)求、后端處理、瀏覽器響應(yīng)三個(gè)步驟。瀏覽器緩存可以幫助我們?cè)诘谝缓偷谌襟E中優(yōu)化性能。比如說直接使用緩存而不發(fā)起請(qǐng)求，或者發(fā)起了請(qǐng)求但后端存儲(chǔ)的數(shù)據(jù)和前端一致，那么就沒有必要再將數(shù)據(jù)回傳回來，這樣就減少了響應(yīng)數(shù)據(jù)。

強(qiáng)制緩存就是向?yàn)g覽器緩存查找該請(qǐng)求結(jié)果，并根據(jù)該結(jié)果的緩存規(guī)則來決定是否使用該緩存結(jié)果的過程，強(qiáng)制緩存的情況主要有三種，如下：

①不存在該緩存結(jié)果和緩存標(biāo)識(shí)，強(qiáng)制緩存失效，則直接向服務(wù)器發(fā)起請(qǐng)求

②存在該緩存結(jié)果和緩存標(biāo)識(shí)，但該結(jié)果已失效，強(qiáng)制緩存失效，則使用協(xié)商緩存

③存在該緩存結(jié)果和緩存標(biāo)識(shí)，且該結(jié)果尚未失效，強(qiáng)制緩存生效，直接返回該結(jié)果

控制強(qiáng)制緩存的字段分別是Expires和Cache-Control，其中Cache-Control優(yōu)先級(jí)比Expires高。

Cache-Control、Expires都是緩存到期時(shí)間，Cache-Control是相對(duì)值，Expires是絕對(duì)值，即再次發(fā)送請(qǐng)求時(shí)，如果時(shí)間沒到期，強(qiáng)制緩存生效。

注：在無法確定客戶端的時(shí)間是否與服務(wù)端的時(shí)間同步的情況下，Cache-Control相比于expires是更好的選擇，所以同時(shí)存在時(shí)，只有Cache-Control生效。

?
協(xié)商緩存就是強(qiáng)制緩存失效后，瀏覽器攜帶緩存標(biāo)識(shí)向服務(wù)器發(fā)起請(qǐng)求，由服務(wù)器根據(jù)緩存標(biāo)識(shí)決定是否使用緩存的過程

①協(xié)商緩存生效，返回304

②協(xié)商緩存失效，返回200和請(qǐng)求結(jié)果

瀏覽器的緩存存放在哪里，如何在瀏覽器中判斷強(qiáng)制緩存是否生效？

這里我們以博客的請(qǐng)求為例，狀態(tài)碼為灰色的請(qǐng)求則代表使用了強(qiáng)制緩存，請(qǐng)求對(duì)應(yīng)的Size值則代表該緩存存放的位置，分別為from memory cache 和 from disk cache。那么from memory cache 和 from disk cache又分別代表的是什么呢？什么時(shí)候會(huì)使用from disk cache，什么時(shí)候會(huì)使用from memory cache呢？

from memory cache代表使用內(nèi)存中的緩存，from disk cache則代表使用的是硬盤中的緩存，

瀏覽器讀取緩存的順序?yàn)閙emory –> disk?–> 服務(wù)器請(qǐng)求。

內(nèi)存緩存(from memory cache)：內(nèi)存緩存具有兩個(gè)特點(diǎn)，分別是速度快和時(shí)間限制。

硬盤緩存(from disk cache)：硬盤緩存則是直接將緩存寫入硬盤文件中，讀取緩存需要對(duì)該緩存存放的硬盤文件進(jìn)行I/O操作，然后重新解析該緩存內(nèi)容，讀取復(fù)雜，速度比內(nèi)存緩存慢。

在瀏覽器中，瀏覽器會(huì)在js和圖片等文件解析執(zhí)行后直接存入內(nèi)存緩存中，那么當(dāng)刷新頁面時(shí)只需直接從內(nèi)存緩存中讀取(from memory cache)；而css文件則會(huì)存入硬盤文件中，所以每次渲染頁面都需要從硬盤讀取緩存(from disk cache)。