一、前言

關(guān)于頁(yè)面性能優(yōu)化，瀏覽器緩存必定是一個(gè)繞不過的話題，判斷一個(gè)網(wǎng)站的性能最直觀的就是看網(wǎng)頁(yè)打開的速度，而提高網(wǎng)頁(yè)反應(yīng)速度的一個(gè)方式就是使用緩存。一個(gè)優(yōu)秀的緩存策略可以縮短網(wǎng)頁(yè)請(qǐng)求資源的距離，減少延遲，并且由于緩存文件可以重復(fù)利用，還可以減少帶寬，降低網(wǎng)絡(luò)負(fù)荷。因此理解瀏覽器的緩存機(jī)制，就顯得尤為重要。

二、緩存類型

緩存在宏觀上可以分成兩類：私有緩存和共享緩存。共享緩存就是那些能被各級(jí)代理緩存的緩存。私有緩存就是用戶專享的，各級(jí)代理不能緩存的緩存。

微觀上可以分下面幾類：

1. 瀏覽器緩存

緩存存在的意義就是當(dāng)用戶點(diǎn)擊back按鈕或是再次去訪問某個(gè)頁(yè)面的時(shí)候能夠更快的響應(yīng)。尤其是在多頁(yè)應(yīng)用的網(wǎng)站中，如果你在多個(gè)頁(yè)面使用了一張相同的圖片，那么緩存這張圖片就變得特別的有用。瀏覽器先向代理服務(wù)器發(fā)起Web請(qǐng)求，再將請(qǐng)求轉(zhuǎn)發(fā)到源服務(wù)器。其中瀏覽器緩存包括強(qiáng)緩存和協(xié)商緩存，下文有詳細(xì)介紹。本文主要側(cè)重點(diǎn)就是針對(duì)于瀏覽器緩存。

2.CDN緩存

　　CDN緩存一般是由網(wǎng)站管理員自己部署，為了讓他們的網(wǎng)站更容易擴(kuò)展并獲得更好的性能。通常情況下，瀏覽器先向CDN網(wǎng)關(guān)發(fā)起Web請(qǐng)求，網(wǎng)關(guān)服務(wù)器后面對(duì)應(yīng)著一臺(tái)或多臺(tái)負(fù)載均衡源服務(wù)器，會(huì)根據(jù)它們的負(fù)載請(qǐng)求，動(dòng)態(tài)將請(qǐng)求轉(zhuǎn)發(fā)到合適的源服務(wù)器上。從瀏覽器角度來(lái)看，整個(gè)CDN就是一個(gè)源服務(wù)器，從這個(gè)層面來(lái)說，瀏覽器和服務(wù)器之間的緩存機(jī)制，在這種架構(gòu)下同樣適用。

3.代理服務(wù)器緩存

　　代理服務(wù)器是瀏覽器和源服務(wù)器之間的中間服務(wù)器，代理轉(zhuǎn)發(fā)響應(yīng)時(shí)，緩存代理會(huì)預(yù)先將資源的副本（緩存）保存到代理服務(wù)器上。當(dāng)代理再次接收到對(duì)相同資源的請(qǐng)求時(shí)，就可以不從源服務(wù)器那里獲取資源，而是將之前緩存的資源作為響應(yīng)返回。

4.數(shù)據(jù)庫(kù)緩存

　　數(shù)據(jù)庫(kù)緩存是指，當(dāng)web應(yīng)用的關(guān)系比較復(fù)雜，數(shù)據(jù)庫(kù)中的表很多的時(shí)候，如果頻繁進(jìn)行數(shù)據(jù)庫(kù)查詢，很容易導(dǎo)致數(shù)據(jù)庫(kù)不堪重荷。為了提供查詢的性能，將查詢后的數(shù)據(jù)放到內(nèi)存中進(jìn)行緩存，下次查詢時(shí)，直接從內(nèi)存緩存直接返回，提供響應(yīng)效率。

5.應(yīng)用層緩存

　　應(yīng)用層緩存是指我們?cè)诖�碼層面上做的緩存。通過代碼邏輯，把曾經(jīng)請(qǐng)求過的數(shù)據(jù)或資源等，緩存起來(lái)，再次需要數(shù)據(jù)時(shí)通過邏輯上的處理選擇可用的緩存的數(shù)據(jù)。

三、緩存過程分析

瀏覽器與服務(wù)器通信的方式為應(yīng)答模式，即是：瀏覽器發(fā)起HTTP請(qǐng)求 – 服務(wù)器響應(yīng)該請(qǐng)求，那么瀏覽器怎么確定一個(gè)資源該不該緩存，如何去緩存呢？瀏覽器第一次向服務(wù)器發(fā)起該請(qǐng)求后拿到請(qǐng)求結(jié)果后，將請(qǐng)求結(jié)果和緩存標(biāo)識(shí)存入瀏覽器緩存，瀏覽器對(duì)于緩存的處理是根據(jù)第一次請(qǐng)求資源時(shí)返回的響應(yīng)頭來(lái)確定的。具體過程如下圖：

由上圖我們可以知道：

• 瀏覽器每次發(fā)起請(qǐng)求，都會(huì)先在瀏覽器緩存中查找該請(qǐng)求的結(jié)果以及緩存標(biāo)識(shí)

• 瀏覽器每次拿到返回的請(qǐng)求結(jié)果都會(huì)將該結(jié)果和緩存標(biāo)識(shí)存入瀏覽器緩存中

以上兩點(diǎn)結(jié)論就是瀏覽器緩存機(jī)制的關(guān)鍵，它確保了每個(gè)請(qǐng)求的緩存存入與讀取，只要我們?cè)倮斫鉃g覽器緩存的使用規(guī)則，那么所有的問題就迎刃而解了，本文也將圍繞著這點(diǎn)進(jìn)行詳細(xì)分析。為了方便大家理解，這里我們根據(jù)是否需要向服務(wù)器重新發(fā)起HTTP請(qǐng)求將緩存過程分為兩個(gè)部分，分別是強(qiáng)緩存和協(xié)商緩存。

四、強(qiáng)緩存

強(qiáng)緩存：不會(huì)向服務(wù)器發(fā)送請(qǐng)求，直接從緩存中讀取資源，在chrome控制臺(tái)的network選項(xiàng)中可以看到該請(qǐng)求返回200的狀態(tài)碼，并且size顯示from disk cache或from memory cache。

這里以我的簡(jiǎn)書博客的請(qǐng)求為例，狀態(tài)碼為灰色的請(qǐng)求則代表使用了強(qiáng)制緩存，請(qǐng)求對(duì)應(yīng)的Size值則代表該緩存存放的位置，分別為from memory cache 和 from disk cache。這里或許小伙伴會(huì)有這樣的疑惑：

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

#### 相關(guān)的header:

1.Expires：response header里的過期時(shí)間，瀏覽器再次加載資源時(shí)，如果在這個(gè)過期時(shí)間內(nèi)，則命中強(qiáng)緩存。它的值為一個(gè)絕對(duì)時(shí)間的GMT格式的時(shí)間字符串， 比如Expires:Thu,21 Jan 2018 23:39:02 GMT

2.Cache-Control ：在HTTP/1.1中，Cache-Control是最重要的規(guī)則，主要用于控制網(wǎng)頁(yè)緩存。比如當(dāng)Cache-Control:max-age=300時(shí)，則代表在這個(gè)請(qǐng)求正確返回時(shí)間（瀏覽器也會(huì)記錄下來(lái)）的5分鐘內(nèi)再次加載資源，就會(huì)命中強(qiáng)緩存。常見有以下六個(gè)屬性值：

public：所有內(nèi)容都將被緩存（客戶端和代理服務(wù)器都可緩存）。具體來(lái)說響應(yīng)可被任何中間節(jié)點(diǎn)緩存，如 Browser <-- proxy1 <-- proxy2 <-- Server，中間的proxy可以緩存資源，比如下次再請(qǐng)求同一資源proxy1直接把自己緩存的東西給 Browser 而不再向proxy2要。

private：所有內(nèi)容只有客戶端可以緩存，Cache-Control的默認(rèn)取值。具體來(lái)說，表示中間節(jié)點(diǎn)不允許緩存，對(duì)于Browser <-- proxy1 <-- proxy2 <-- Server，proxy 會(huì)老老實(shí)實(shí)把Server 返回的數(shù)據(jù)發(fā)送給proxy1,自己不緩存任何數(shù)據(jù)。當(dāng)下次Browser再次請(qǐng)求時(shí)proxy會(huì)做好請(qǐng)求轉(zhuǎn)發(fā)而不是自作主張給自己緩存的數(shù)據(jù)。

no-cache：客戶端緩存內(nèi)容，是否使用緩存則需要經(jīng)過協(xié)商緩存來(lái)驗(yàn)證決定。表示不使用 Cache-Control的緩存控制方式做前置驗(yàn)證，而是使用 Etag 或者Last-Modified字段來(lái)控制緩存。需要注意的是，no-cache這個(gè)名字有一點(diǎn)誤導(dǎo)。設(shè)置了no-cache之后，并不是說瀏覽器就不再緩存數(shù)據(jù)，只是瀏覽器在使用緩存數(shù)據(jù)時(shí)，需要先確認(rèn)一下數(shù)據(jù)是否還跟服務(wù)器保持一致。

no-store：所有內(nèi)容都不會(huì)被緩存，即不使用強(qiáng)制緩存，也不使用協(xié)商緩存

max-age：max-age=xxx (xxx is numeric)表示緩存內(nèi)容將在xxx秒后失效

s-maxage（單位為s)：同max-age，只用于共享緩存（比如CDN緩存）。比如當(dāng)s-maxage=60時(shí)，在這60秒中，即使更新了CDN的內(nèi)容，瀏覽器也不會(huì)進(jìn)行請(qǐng)求。max-age用于普通緩存，而s-maxage用于代理緩存。s-maxage的優(yōu)先級(jí)高于max-age。如果存在s-maxage，則會(huì)覆蓋掉max-age和Expires header。

Expires和Cache-Control兩者對(duì)比：其實(shí)這兩者差別不大，區(qū)別就在于 Expires 是http1.0的產(chǎn)物，Cache-Control是http1.1的產(chǎn)物，兩者同時(shí)存在的話，Cache-Control優(yōu)先級(jí)高于Expires；在某些不支持HTTP1.1的環(huán)境下，Expires就會(huì)發(fā)揮用處。所以Expires其實(shí)是過時(shí)的產(chǎn)物，現(xiàn)階段它的存在只是一種兼容性的寫法。
強(qiáng)緩存判斷是否緩存的依據(jù)來(lái)自于是否超出某個(gè)時(shí)間或者某個(gè)時(shí)間段，而不關(guān)心服務(wù)器端文件是否已經(jīng)更新，這可能會(huì)導(dǎo)致加載文件不是服務(wù)器端最新的內(nèi)容，那我們?nèi)绾潍@知服務(wù)器端內(nèi)容是否已經(jīng)發(fā)生了更新呢？此時(shí)我們需要用到協(xié)商緩存策略。

五、協(xié)商緩存

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

• 協(xié)商緩存生效，返回304和Not Modified

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

相關(guān)的header:

1.Last-Modified和If-Modified-Since

瀏覽器在第一次訪問資源時(shí)，服務(wù)器返回資源的同時(shí)，在response header中添加 Last-Modified的header，值是這個(gè)資源在服務(wù)器上的最后修改時(shí)間，瀏覽器接收后緩存文件和header；

Last-Modified: Fri, 22 Jul 2016 01:47:00 GMT

瀏覽器下一次請(qǐng)求這個(gè)資源，瀏覽器檢測(cè)到有 Last-Modified這個(gè)header，于是添加If-Modified-Since這個(gè)header，值就是Last-Modified中的值；服務(wù)器再次收到這個(gè)資源請(qǐng)求，會(huì)根據(jù) If-Modified-Since 中的值與服務(wù)器中這個(gè)資源的最后修改時(shí)間對(duì)比，如果沒有變化，返回304和空的響應(yīng)體，直接從緩存讀取，如果If-Modified-Since的時(shí)間小于服務(wù)器中這個(gè)資源的最后修改時(shí)間，說明文件有更新，于是返回新的資源文件和200

但last-modified 存在一些缺點(diǎn)：

①某些服務(wù)端不能獲取精確的修改時(shí)間

②文件修改時(shí)間改了，但文件內(nèi)容卻沒有變

既然根據(jù)文件修改時(shí)間來(lái)決定是否緩存尚有不足，能否可以直接根據(jù)文件內(nèi)容是否修改來(lái)決定緩存策略？----ETag和If-None-Match

2.ETag和If-None-Match

Etag是上一次加載資源時(shí)，服務(wù)器返回的response header，是對(duì)該資源的一種唯一標(biāo)識(shí)，只要資源有變化，Etag就會(huì)重新生成。瀏覽器在下一次加載資源向服務(wù)器發(fā)送請(qǐng)求時(shí)，會(huì)將上一次返回的Etag值放到request header里的If-None-Match里，服務(wù)器只需要比較客戶端傳來(lái)的If-None-Match跟自己服務(wù)器上該資源的ETag是否一致，就能很好地判斷資源相對(duì)客戶端而言是否被修改過了。如果服務(wù)器發(fā)現(xiàn)ETag匹配不上，那么直接以常規(guī)GET 200回包形式將新的資源（當(dāng)然也包括了新的ETag）發(fā)給客戶端；如果ETag是一致的，則直接返回304知會(huì)客戶端直接使用本地緩存即可。

兩者之間對(duì)比：
首先在精確度上，Etag要優(yōu)于Last-Modified。Last-Modified的時(shí)間單位是秒，如果某個(gè)文件在1秒內(nèi)改變了多次，那么他們的Last-Modified其實(shí)并沒有體現(xiàn)出來(lái)修改，但是Etag每次都會(huì)改變確保了精度；如果是負(fù)載均衡的服務(wù)器，各個(gè)服務(wù)器生成的Last-Modified也有可能不一致。
第二在性能上，Etag要遜于Last-Modified，畢竟Last-Modified只需要記錄時(shí)間，而Etag需要服務(wù)器通過算法來(lái)計(jì)算出一個(gè)hash值。
第三在優(yōu)先級(jí)上，服務(wù)器校驗(yàn)優(yōu)先考慮Etag

六、緩存的機(jī)制

強(qiáng)制緩存優(yōu)先于協(xié)商緩存進(jìn)行，若強(qiáng)制緩存(Expires和Cache-Control)生效則直接使用緩存，若不生效則進(jìn)行協(xié)商緩存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，協(xié)商緩存由服務(wù)器決定是否使用緩存，若協(xié)商緩存失效，那么代表該請(qǐng)求的緩存失效，返回200，重新返回資源和緩存標(biāo)識(shí)，再存入瀏覽器緩存中；生效則返回304，繼續(xù)使用緩存。具體流程圖如下：

七、用戶行為對(duì)瀏覽器緩存的影響

如果資源已經(jīng)被瀏覽器緩存下來(lái)，在緩存失效之前，再次請(qǐng)求時(shí)，默認(rèn)會(huì)先檢查是否命中強(qiáng)緩存，如果強(qiáng)緩存命中則直接讀取緩存，如果強(qiáng)緩存沒有命中則發(fā)請(qǐng)求到服務(wù)器檢查是否命中協(xié)商緩存，如果協(xié)商緩存命中，則告訴瀏覽器還是可以從緩存讀取，否則才從服務(wù)器返回最新的資源。這是默認(rèn)的處理方式，這個(gè)方式可能被瀏覽器的行為改變：

1. 地址欄訪問，鏈接跳轉(zhuǎn)是正常用戶行為，將會(huì)觸發(fā)瀏覽器緩存機(jī)制；

2. F5刷新，瀏覽器會(huì)設(shè)置max-age=0，跳過強(qiáng)緩存判斷，會(huì)進(jìn)行協(xié)商緩存判斷；

3. ctrl+F5刷新，跳過強(qiáng)緩存和協(xié)商緩存，直接從服務(wù)器拉取資源。

以上就是瀏覽器緩存機(jī)制的深入解析（圖文）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！