摘要：協(xié)商緩存則會(huì)向服務(wù)器請(qǐng)求確認(rèn)資源是否過(guò)期。這也是緩存驗(yàn)證的順序，先使用強(qiáng)緩存，后使用協(xié)商緩存。表明響應(yīng)只能被單個(gè)用戶緩存，不能作為共享緩存即代理服務(wù)器不能緩存它可以緩存響應(yīng)內(nèi)容。設(shè)置緩存存儲(chǔ)的最大周期，超過(guò)這個(gè)時(shí)間緩存被認(rèn)為過(guò)期單位秒。

HTTP緩存的存在是因?yàn)閣eb前端的性能瓶頸大部分的原因在于HTTP傳輸?shù)臅r(shí)間耗費(fèi)過(guò)長(zhǎng)。如果能夠減少這種HTTP請(qǐng)求的時(shí)間，對(duì)網(wǎng)頁(yè)的性能來(lái)說(shuō)是非常大的提升，對(duì)于用戶的體驗(yàn)也能得到極大的改善。

HTTP緩存可分為強(qiáng)緩存（Cache-Control和Expires）以及協(xié)商緩存（Etag和Last-Modified）。

強(qiáng)緩存和協(xié)商緩存的區(qū)別在于：如果命中強(qiáng)緩存，會(huì)直接從緩存中讀取資源，不向服務(wù)器請(qǐng)求。協(xié)商緩存則會(huì)向服務(wù)器請(qǐng)求確認(rèn)資源是否過(guò)期。這也是緩存驗(yàn)證的順序，先使用強(qiáng)緩存，后使用協(xié)商緩存。

下面則簡(jiǎn)單介紹一下這兩種緩存類型的標(biāo)識(shí)

Cache-Control設(shè)置有效期max-age的值是時(shí)間的相對(duì)值。

下面則簡(jiǎn)單介紹Cache-Control常用的使用值：

若想了解更詳細(xì)的說(shuō)明，可參考此鏈接：developer.mozilla.org/zh-CN/docs/…

Expires 響應(yīng)頭包含日期/時(shí)間， 即在此時(shí)候之后，響應(yīng)過(guò)期。

Expires設(shè)置的值是一個(gè)絕對(duì)值。

Expires: Wed, 21 Oct 2015 07:28:00 GMT

Etag HTTP響應(yīng)頭是資源的特定版本的標(biāo)識(shí)符。這可以讓緩存更高效，并節(jié)省帶寬，因?yàn)槿绻麅?nèi)容沒(méi)有改變，Web服務(wù)器不需要發(fā)送完整的響應(yīng)。而如果內(nèi)容發(fā)生了變化，使用ETag有助于防止資源的同時(shí)更新相互覆蓋（“空中碰撞”）。

Etag的值是根據(jù)資源文件內(nèi)容生成的一個(gè)hash值。

Etag: 33a64df551425fcc55e4d42a148795d9f25f89d4

Last-Modified包含源頭服務(wù)器認(rèn)定的資源做出修改的日期及時(shí)間。 它通常被用作一個(gè)驗(yàn)證器來(lái)判斷接收到的或者存儲(chǔ)的資源是否彼此一致。由于精確度比 ETag 要低，所以這是一個(gè)備用機(jī)制。

Last-Modified的值是一個(gè)時(shí)間的絕對(duì)值。

Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT

先使用強(qiáng)緩存（Cache-Control > Expires） 判斷資源是否過(guò)期；

若資源未過(guò)期則直接從緩存讀取，若資源過(guò)期則使用協(xié)商緩存；

使用協(xié)商緩存（Etag > Last-Modified）請(qǐng)求服務(wù)器確認(rèn)資源有無(wú)修改（請(qǐng)求頭會(huì)帶上 If-None-Match 或 If-Modified-Since）；

若資源無(wú)修改則返回 304 狀態(tài)碼告訴客戶端可讀取緩存；若資源已修改則返回 200 狀態(tài)碼重新獲取資源；

圖示：

HTTP緩存驗(yàn)證說(shuō)明

以下的HTTP緩存驗(yàn)證說(shuō)明是基于假設(shè)請(qǐng)求存在4個(gè)緩存頭標(biāo)記；

HTTP緩存是否過(guò)期，先判斷Cache-Control是否設(shè)置max-age或s-max-age，如果已設(shè)置則忽略Expires并且驗(yàn)證是否過(guò)期，否則驗(yàn)證Expires是否過(guò)期；其實(shí)按照MDN文檔的說(shuō)明，Last-Modified也是可以計(jì)算出一個(gè)緩存時(shí)間；

下面是MDN文檔的說(shuō)明：

對(duì)于含有特定頭信息的請(qǐng)求，會(huì)去計(jì)算緩存壽命。比如Cache-control: max-age=N的頭，相應(yīng)的緩存的壽命就是N。通常情況下，對(duì)于不含這個(gè)屬性的請(qǐng)求則會(huì)去查看是否包含Expires屬性，通過(guò)比較Expires的值和頭里面Date屬性的值來(lái)判斷是否緩存還有效。如果max-age和expires屬性都沒(méi)有，找找頭里的Last-Modified信息。如果有，緩存的壽命就等于頭里面Date的值減去Last-Modified的值除以10（注：根據(jù)rfc2626其實(shí)也就是乘以10%）。

緩存時(shí)間計(jì)算公式：

expirationTime = responseTime + freshnessLifetime - currentAge

如果該緩存未過(guò)期，是不會(huì)向服務(wù)器發(fā)送請(qǐng)求的，而是直接從緩存中讀取，也就是我們可以從HTTP請(qǐng)求信息里得到的狀態(tài)碼 200 (from cache memory || from disk memory) ，如果緩存過(guò)期，則使用協(xié)商緩存；

先嘗試從內(nèi)存中讀取，再嘗試從硬盤中讀取。

200 form memory cache 不訪問(wèn)服務(wù)器，一般已經(jīng)加載過(guò)該資源且緩存在了內(nèi)存當(dāng)中，直接從內(nèi)存中讀取緩存。瀏覽器關(guān)閉后，數(shù)據(jù)將不存在（資源被釋放掉了），再次打開相同的頁(yè)面時(shí)，不會(huì)出現(xiàn)from memory cache。

200 from disk cache 不訪問(wèn)服務(wù)器，已經(jīng)在之前的某個(gè)時(shí)間加載過(guò)該資源，直接從硬盤中讀取緩存，關(guān)閉瀏覽器后，數(shù)據(jù)依然存在，此資源不會(huì)隨著該頁(yè)面的關(guān)閉而釋放掉下次打開仍然會(huì)是from disk cache。

使用協(xié)商緩存驗(yàn)證緩存資源是否修改；Etag > Last-Modified，當(dāng)存在Etag則使用Etag，否則使用Last-Modified；并且請(qǐng)求時(shí)會(huì)帶上特定的標(biāo)識(shí)；

Etag 請(qǐng)求時(shí)會(huì)帶上 If-None-Match

Last-Modified 請(qǐng)求時(shí)會(huì)帶上 If-Modified-Since

當(dāng)確認(rèn)資源未修改時(shí)則返回 304 (Not Modified)告訴客戶端可以繼續(xù)使用緩存，否則返回200重新獲取新的資源。

HTTP緩存早期的時(shí)候只有Expires和Last-Modified，為什么后面又會(huì)出現(xiàn)Cache-Control和Etag呢？

先說(shuō)說(shuō)Expires和Cache-Control，Expires的值是一個(gè)準(zhǔn)確的時(shí)間，比較的時(shí)候先根據(jù)返回頭的Date值比較判斷，但是若無(wú)Date頭信息返回則是根據(jù)客戶端的本地時(shí)間進(jìn)行比較；本地時(shí)間因?yàn)楦鞣N因素影響，會(huì)存在各種不同的值，導(dǎo)致Expires緩存的時(shí)間并不是我們想要的效果。而Cache-Control設(shè)置max-age使用的相對(duì)值則相對(duì)來(lái)說(shuō)控制粒度更精確了；并且Cache-Control的其他值則讓我們對(duì)于緩存的控制更加靈活。

再說(shuō)說(shuō)Last-Modified和Etag，Last-Modified的值也是一個(gè)準(zhǔn)確的時(shí)間，精確到秒；使用時(shí)間來(lái)判斷資源是否修改則可能存在以下問(wèn)題：

1秒內(nèi)的修改可能不被檢查到，導(dǎo)致緩存無(wú)法更新；

資源可能只是多了幾個(gè)空格或無(wú)變化，但是Last-Modified的時(shí)間已經(jīng)變化；

針對(duì)以上的問(wèn)題所以有了Etag的存在，Etag是根據(jù)資源內(nèi)容生成的hash值對(duì)比判斷資源是否更新，控制粒度比Last-Modified更加精確。

HTTP緩存的本質(zhì)上是以空間換時(shí)間，緩存的存在是為了盡可能的減少HTTP請(qǐng)求次數(shù)和HTTP傳輸?shù)膬?nèi)容大小，這也是前端性能優(yōu)化中重要的一環(huán)。合理的設(shè)置頁(yè)面資源的緩存，有助你提升頁(yè)面的體驗(yàn)。