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

HTTP緩存的存在是因為web前端的性能瓶頸大部分的原因在于HTTP傳輸?shù)臅r間耗費過長。如果能夠減少這種HTTP請求的時間，對網(wǎng)頁的性能來說是非常大的提升，對于用戶的體驗也能得到極大的改善。

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

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

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

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

下面則簡單介紹Cache-Control常用的使用值：

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

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

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

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

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

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

Etag: 33a64df551425fcc55e4d42a148795d9f25f89d4

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

Last-Modified的值是一個時間的絕對值。

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

先使用強緩存（Cache-Control > Expires） 判斷資源是否過期；

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

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

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

圖示：

HTTP緩存驗證說明

以下的HTTP緩存驗證說明是基于假設(shè)請求存在4個緩存頭標(biāo)記；

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

下面是MDN文檔的說明：

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

緩存時間計算公式：

expirationTime = responseTime + freshnessLifetime - currentAge

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

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

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

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

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

Etag 請求時會帶上 If-None-Match

Last-Modified 請求時會帶上 If-Modified-Since

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

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

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

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

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

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

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

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