瀏覽器一般緩存圖片、CSS、JS等靜態(tài)文件，因?yàn)檫@些文件的更新頻率相對來說比較低，合理利用瀏覽器的緩存對網(wǎng)站的性能提升有很大幫助。

    HTTP緩存分為兩部分，分別是本地緩存和緩存協(xié)商，當(dāng)本地緩存不生效時(shí)會啟用緩存協(xié)商。HTTP緩存主要由HTTP協(xié)議的頭（Header）信息來制定。

一.本地緩存

    本地緩存是指瀏覽器請求資源時(shí)命中了瀏覽器本地的緩存資源，瀏覽器并不會發(fā)送真正的請求給服務(wù)器了。它的執(zhí)行過程是：

    第一次瀏覽器發(fā)送請求給服務(wù)器時(shí)，此時(shí)瀏覽器還沒有本地緩存副本，服務(wù)器返回資源給瀏覽器，響應(yīng)碼是200 OK，瀏覽器收到資源后，把資源和對應(yīng)的響應(yīng)頭一起緩存下來。

    第二次瀏覽器準(zhǔn)備發(fā)送請求給服務(wù)器時(shí)候，瀏覽器會先檢查上一次服務(wù)端返回的響應(yīng)頭信息中的Cache-Control，它的值是一個(gè)相對值，單位為秒，表示資源在客戶端緩存的最大有效期，過期時(shí)間為第一次請求的時(shí)間減去Cache-Control的值，過期時(shí)間跟當(dāng)前的請求時(shí)間比較，如果本地緩存資源沒過期，那么命中緩存，不再請求服務(wù)器。

    如果沒有命中，瀏覽器就會把請求發(fā)送給服務(wù)器，進(jìn)入緩存協(xié)商階段。

    與本地緩存相關(guān)的頭有：Cache-Control、Expires。Cache-Control有多個(gè)可選值代表不同的意義，而Expires就是一個(gè)日期格式的絕對值。

1.Cache-Control

    Cache-Control是HTTP緩存策略中最重要的頭，它是HTTP/1.1中出現(xiàn)的，它由如下幾個(gè)值

    no-cache：不使用本地緩存。需要使用緩存協(xié)商，先與服務(wù)器確認(rèn)返回的響應(yīng)是否被更改，如果之前的響應(yīng)中存在ETag，那么請求的時(shí)候會與服務(wù)端驗(yàn)證，如果資源未被更改，則可以避免重新下載。

    no-store：直接禁止游覽器緩存數(shù)據(jù)，每次用戶請求該資源，都會向服務(wù)器發(fā)送一個(gè)請求，每次都會下載完整的資源。

    public：可以被所有的用戶緩存，包括終端用戶和CDN等中間代理服務(wù)器。

    private：只能被終端用戶的瀏覽器緩存，不允許CDN等中繼緩存服務(wù)器對其緩存。

    max-age：從當(dāng)前請求開始，允許獲取的響應(yīng)被重用的最長時(shí)間（秒） 

    例如： Cache-Control:public, max-age=1000

    表示資源可以被所有用戶以及代理服務(wù)器緩存，最長時(shí)間為1000秒。

2.Expires

    Expires是HTTP/1.0出現(xiàn)的頭信息，同樣是用于決定本地緩存策略的頭，它是一個(gè)絕對時(shí)間，時(shí)間格式是如Mon, 10 Jun 2015 21:31:12 GMT，只要發(fā)送請求時(shí)間是在Expires之前，那么本地緩存始終有效，否則就會去服務(wù)器發(fā)送請求獲取新的資源。如果同時(shí)出現(xiàn)Cache-Control：max-age和Expires，那么max-age優(yōu)先級更高。他們可以這樣組合使用：

Cache-Control:publicExpires: Mon, 10 Jun 2015 21:31:12 GMT

二.緩存協(xié)商

    當(dāng)?shù)谝淮握埱髸r(shí)服務(wù)器返回的響應(yīng)頭中沒有Cache-Control和Expires或者Cache-Control和Expires過期抑或它的屬性設(shè)置為no-cache時(shí)，那么瀏覽器第二次請求時(shí)就會與服務(wù)器進(jìn)行協(xié)商，詢問瀏覽器中的緩存資源是不是舊版本，需不需要更新，此時(shí)，服務(wù)器就會做出判斷。

    如果緩存和服務(wù)端資源的最新版本是一致的，那么就無需再次下載該資源，服務(wù)端直接返回304 Not Modified 狀態(tài)碼，如果服務(wù)器發(fā)現(xiàn)瀏覽器中的緩存已經(jīng)是舊版本了，那么服務(wù)器就會把最新資源的完整內(nèi)容返回給瀏覽器，狀態(tài)碼就是200 Ok。

    那么服務(wù)端是根據(jù)什么來判斷瀏覽器的緩存是不是最新的呢？其實(shí)是根據(jù)HTTP的另外兩組頭信息，分別是：Last-Modified/If-Modified-Since 與 ETag/If-None-Match。

1. Last-Modified與If-Modified-Since

    瀏覽器第一次請求資源時(shí)，服務(wù)器會把資源的最新修改時(shí)間Last-Modified:Thu, 29 Dec 2011 18:23:55 GMT放在響應(yīng)頭中返回給瀏覽器；

    第二次請求時(shí)，瀏覽器就會把上一次服務(wù)器返回的修改時(shí)間放在請求頭If-Modified-Since:Thu, 29 Dec 2011 18:23:55發(fā)送給服務(wù)器，服務(wù)器就會拿這個(gè)時(shí)間跟服務(wù)器上的資源的最新修改時(shí)間進(jìn)行對比；

    如果兩者相等或者大于服務(wù)器上的最新修改時(shí)間，那么表示瀏覽器的緩存是有效的，此時(shí)緩存會命中，服務(wù)器就不再返回內(nèi)容給瀏覽器了，同時(shí)Last-Modified頭也不會返回，因?yàn)橘Y源沒被修改，返回了也沒什么意義。

    如果沒命中緩存則最新修改的資源連同Last-Modified頭一起返回。

    第一次請求返回的響應(yīng)頭：

    Cache-Control:max-age=3600Expires:Tue, 26 Jan 2016 08:28:52 GMTLast-Modified:Fri, 15 Jan 2016 12:06:06 GMT

    第二次請求的請求頭信息：If-Modified-Since:Fri, 15 Jan 2016 12:06:06 GMT

    這組頭信息是基于資源的修改時(shí)間來判斷資源有沒有更新，另一種方式就是根據(jù)資源的內(nèi)容來判斷，就是接下來要討論的ETag與If-None-Match

2. ETag與If-None-Match

    ETag/If-None-Match與Last-Modified/If-Modified-Since的流程其實(shí)是類似的，唯一的區(qū)別是它基于資源的內(nèi)容的摘要信息（比如MD5 hash）來判斷。

    瀏覽器發(fā)送第二次請求時(shí)，會把第一次的響應(yīng)頭信息ETag的值放在If-None-Match的請求頭中發(fā)送到服務(wù)器，與最新的資源的摘要信息對比，如果相等，取瀏覽器緩存，否則內(nèi)容有更新，最新的資源連同最新的摘要信息返回。

    用ETag的好處是如果因?yàn)槟撤N原因到時(shí)資源的修改時(shí)間沒改變，那么用ETag就能區(qū)分資源是不是有被更新。

    第一次請求返回的響應(yīng)頭：Cache-Control:public, max-age=31536000ETag: "15f0fff99ed5aae4edffdd6496d7131f"

    第二次請求的請求頭信息：If-None-Match: "15f0fff99ed5aae4edffdd6496d7131f"