摘要：是服務(wù)器響應(yīng)消息頭字段，在響應(yīng)請(qǐng)求時(shí)告訴瀏覽器在過(guò)期時(shí)間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)，而無(wú)需再次請(qǐng)求。注意點(diǎn)啟用緩存之后，瀏覽器的緩存行為與用戶的操作方式有關(guān)系，驗(yàn)證緩存特性開(kāi)啟的時(shí)候不要被假象蒙蔽。

以前總是傻傻的分不清緩存和cookie，誤認(rèn)為cookie就是指瀏覽器緩存。還有 cookie localStorage sessionStorage 緩存 四者的關(guān)系也沒(méi)有搞明白。經(jīng)過(guò)一番折騰，終于從網(wǎng)上找到了一些關(guān)于緩存的知識(shí)。今天這篇文章就先介紹一下緩存吧。

注：以下內(nèi)容整理自網(wǎng)絡(luò)，另加筆者參考《http權(quán)威指南》整理得到。

在前端開(kāi)發(fā)中，性能一直都是被大家所重視的一點(diǎn)，然而判斷一個(gè)網(wǎng)站的性能最直觀的就是看網(wǎng)頁(yè)打開(kāi)的速度。其中提高網(wǎng)頁(yè)反應(yīng)速度的一個(gè)方式就是使用緩存。一個(gè)優(yōu)秀的緩存策略可以縮短網(wǎng)頁(yè)請(qǐng)求資源的距離，減少延遲，并且由于緩存文件可以重復(fù)利用，還可以減少帶寬，降低網(wǎng)絡(luò)負(fù)荷。那么下面我們就來(lái)看看服務(wù)器端緩存的原理。

web緩存分為很多種，比如數(shù)據(jù)庫(kù)緩存、代理服務(wù)器緩存、還有我們熟悉的CDN緩存，以及瀏覽器緩存。對(duì)于太多文字的閱讀其實(shí)我是拒絕的，于是就畫(huà)了個(gè)圖來(lái)解釋下。
瀏覽器通過(guò)代理服務(wù)器向源服務(wù)器發(fā)起請(qǐng)求的原理如下圖

瀏覽器先向代理服務(wù)器發(fā)起Web請(qǐng)求，再將請(qǐng)求轉(zhuǎn)發(fā)到源服務(wù)器。它屬于共享緩存，所以很多地方都可以使用其緩存資源，因此對(duì)于節(jié)省流量有很大作用。

瀏覽器緩存是將文件保存在客戶端，在同一個(gè)會(huì)話過(guò)程中會(huì)檢查緩存的副本是否足夠新，在后退網(wǎng)頁(yè)時(shí)，訪問(wèn)過(guò)的資源可以從瀏覽器緩存中拿出使用。通過(guò)減少服務(wù)器處理請(qǐng)求的數(shù)量，用戶將獲得更快的體驗(yàn)
下面我就來(lái)著重講下傳說(shuō)中的瀏覽器緩存。

頁(yè)面的緩存狀態(tài)是由header決定的，header的參數(shù)有四種：

Cache-Control包括：max-age / s-maxage/public/private/no-cache/no-store/must-revalidate等

1、max-age（單位為s）指定設(shè)置緩存最大的有效時(shí)間，定義的是時(shí)間長(zhǎng)短。當(dāng)瀏覽器向服務(wù)器發(fā)送請(qǐng)求后，在max-age這段時(shí)間里瀏覽器就不會(huì)再向服務(wù)器發(fā)送請(qǐng)求了。
我們來(lái)找個(gè)資源看下。比如shang.qq.com上的css資源，max-age=2592000，也就是說(shuō)緩存有效期為2592000秒（也就是30天）。于是在30天內(nèi)都會(huì)使用這個(gè)版本的資源，即使服務(wù)器上的資源發(fā)生了變化，瀏覽器也不會(huì)得到通知。max-age會(huì)覆蓋掉Expires，后面會(huì)有討論。

2、s-maxage（單位為s）同max-age，只用于共享緩存（比如CDN緩存）。
比如，當(dāng)s-maxage=60時(shí)，在這60秒中，即使更新了CDN的內(nèi)容，瀏覽器也不會(huì)進(jìn)行請(qǐng)求。也就是說(shuō)max-age用于普通緩存，而s-maxage用于代理緩存。如果存在s-maxage，則會(huì)覆蓋掉max-age和Expires header。
3、public 指定響應(yīng)會(huì)被緩存，并且在多用戶間共享。也就是下圖的意思。如果沒(méi)有指定public還是private，則默認(rèn)為public。

4、private 響應(yīng)只作為私有的緩存（見(jiàn)下圖），不能在用戶間共享。如果要求HTTP認(rèn)證，響應(yīng)會(huì)自動(dòng)設(shè)置為private。

5、no-cache 指定不緩存響應(yīng)，表明資源不進(jìn)行緩存

但是設(shè)置了no-cache之后并不代表瀏覽器不緩存，而是在緩存前要向服務(wù)器確認(rèn)資源是否被更改。因此有的時(shí)候只設(shè)置no-cache防止緩存還是不夠保險(xiǎn)，還可以加上private指令，將過(guò)期時(shí)間設(shè)為過(guò)去的時(shí)間。
6、no-store 絕對(duì)禁止緩存，一看就知道如果用了這個(gè)命令當(dāng)然就是不會(huì)進(jìn)行緩存啦～每次請(qǐng)求資源都要從服務(wù)器重新獲取。
7、must-revalidate指定如果頁(yè)面是過(guò)期的，則去服務(wù)器進(jìn)行獲取。這個(gè)指令并不常用，就不做過(guò)多的討論了。

緩存過(guò)期時(shí)間，用來(lái)指定資源到期的時(shí)間，是服務(wù)器端的具體的時(shí)間點(diǎn)。也就是說(shuō)，Expires=max-age + 請(qǐng)求時(shí)間，需要和Last-modified結(jié)合使用。但在上面我們提到過(guò)，cache-control的優(yōu)先級(jí)更高。 Expires是Web服務(wù)器響應(yīng)消息頭字段，在響應(yīng)http請(qǐng)求時(shí)告訴瀏覽器在過(guò)期時(shí)間前瀏覽器可以直接從瀏覽器緩存取數(shù)據(jù)，而無(wú)需再次請(qǐng)求。

服務(wù)器端文件的最后修改時(shí)間，需要和cache-control共同使用，是檢查服務(wù)器端資源是否更新的一種方式。當(dāng)瀏覽器再次進(jìn)行請(qǐng)求時(shí)，會(huì)向服務(wù)器傳送If-Modified-Since報(bào)頭，詢問(wèn)Last-Modified時(shí)間點(diǎn)之后資源是否被修改過(guò)。如果沒(méi)有修改，則返回碼為304，使用緩存；如果修改過(guò)，則再次去服務(wù)器請(qǐng)求資源，返回碼和首次請(qǐng)求相同為200，資源為服務(wù)器最新資源。
如下圖，最后修改時(shí)間為2014年12月19日星期五2點(diǎn)50分47秒

根據(jù)實(shí)體內(nèi)容生成一段hash字符串，標(biāo)識(shí)資源的狀態(tài)，由服務(wù)端產(chǎn)生。瀏覽器會(huì)將這串字符串傳回服務(wù)器，驗(yàn)證資源是否已經(jīng)修改，如果沒(méi)有修改，過(guò)程如下：

使用ETag可以解決Last-modified存在的一些問(wèn)題：

a、某些服務(wù)器不能精確得到資源的最后修改時(shí)間，這樣就無(wú)法通過(guò)最后修改時(shí)間判斷資源是否更新 
b、如果資源修改非常頻繁，在秒以下的時(shí)間內(nèi)進(jìn)行修改，而Last-modified只能精確到秒 
c、一些資源的最后修改時(shí)間改變了，但是內(nèi)容沒(méi)改變，使用ETag就認(rèn)為資源還是沒(méi)有修改的。

還是用圖說(shuō)話，下面是我所總結(jié)的從瀏覽器請(qǐng)求到展示資源的過(guò)程（非常重要）：

Etag/If-None-Match
Etag/If-None-Match也要配合Cache-Control使用。
lEtag：web服務(wù)器響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識(shí)（生成規(guī)則由服務(wù)器覺(jué)得）。Apache中，ETag的值，默認(rèn)是對(duì)文件的索引節(jié)（INode），大小（Size）和最后修改時(shí)間（MTime）進(jìn)行Hash后得到的。
lIf-None-Match：當(dāng)資源過(guò)期時(shí)（使用Cache-Control標(biāo)識(shí)的max-age），發(fā)現(xiàn)資源具有Etage聲明，則再次向web服務(wù)器請(qǐng)求時(shí)帶上頭If-None-Match（Etag的值）。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-None-Match則與被請(qǐng)求資源的相應(yīng)校驗(yàn)串進(jìn)行比對(duì)，決定返回200或304。

Last-Modified/If-Modified-Since
Last-Modified/If-Modified-Since要配合Cache-Control使用。
lLast-Modified：標(biāo)示這個(gè)響應(yīng)資源的最后修改時(shí)間。web服務(wù)器在響應(yīng)請(qǐng)求時(shí)，告訴瀏覽器資源的最后修改時(shí)間。
lIf-Modified-Since：當(dāng)資源過(guò)期時(shí)（使用Cache-Control標(biāo)識(shí)的max-age），發(fā)現(xiàn)資源具有Last-Modified聲明，則再次向web服務(wù)器請(qǐng)求時(shí)帶上頭If-Modified-Since，表示請(qǐng)求時(shí)間。web服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-Modified-Since則與被請(qǐng)求資源的最后修改時(shí)間進(jìn)行比對(duì)。若最后修改時(shí)間較新，說(shuō)明資源又被改動(dòng)過(guò)，則響應(yīng)整片資源內(nèi)容（寫(xiě)在響應(yīng)消息包體內(nèi)），HTTP 200；若最后修改時(shí)間較舊，說(shuō)明資源無(wú)新修改，則響應(yīng)HTTP 304 (無(wú)需包體，節(jié)省瀏覽)，告知瀏覽器繼續(xù)使用所保存的cache。

既生Last-Modified何生Etag？
你可能會(huì)覺(jué)得使用Last-Modified已經(jīng)足以讓瀏覽器知道本地的緩存副本是否足夠新，為什么還需要Etag（實(shí)體標(biāo)識(shí)）呢？HTTP1.1中Etag的出現(xiàn)主要是為了解決幾個(gè)Last-Modified比較難解決的問(wèn)題：
1.Last-Modified標(biāo)注的最后修改只能精確到秒級(jí)，如果某些文件在1秒鐘以內(nèi)，被修改多次的話，它將不能準(zhǔn)確標(biāo)注文件的修改時(shí)間
2.如果某些文件會(huì)被定期生成，當(dāng)有時(shí)內(nèi)容并沒(méi)有任何變化，但Last-Modified卻改變了，導(dǎo)致文件沒(méi)法使用緩存
3.有可能存在服務(wù)器沒(méi)有準(zhǔn)確獲取文件修改時(shí)間，或者與代理服務(wù)器時(shí)間不一致等情形
Etag是服務(wù)器自動(dòng)生成或者由開(kāi)發(fā)者生成的對(duì)應(yīng)資源在服務(wù)器端的唯一標(biāo)識(shí)符，能夠更加準(zhǔn)確的控制緩存。Last-Modified與ETag是可以一起使用的，服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag，一致的情況下，才會(huì)繼續(xù)比對(duì)Last-Modified，最后才決定是否返回304。

說(shuō)了那么多cache-control的指令，那么如何選擇使用哪些指令呢？

除了開(kāi)頭提到的那么多緩存方式以外，還有一種我們都熟悉的緩存方式，LocalStorage和sessionStorage（好像是兩種23333）。
LocalStorage是一種本地存儲(chǔ)的公共資源，域名下很多應(yīng)用共享這份資源會(huì)有風(fēng)險(xiǎn)；LocalStorage是以頁(yè)面域名劃分的，如果有多個(gè)等價(jià)域名之間的LocalStorage不互通，則會(huì)造成緩存多份浪費(fèi)。
LocalStorage在PC上的兼容性不太好，而且當(dāng)網(wǎng)絡(luò)速度快、協(xié)商緩存響應(yīng)快時(shí)使用localStorage的速度比不上304。并且不能緩存css文件。而移動(dòng)端由于網(wǎng)速慢，使用localStorage要快于304。
而相對(duì)LocalStorage來(lái)說(shuō)，SessionStorage的數(shù)據(jù)只存儲(chǔ)到特定的會(huì)話中，不屬于持久化的存儲(chǔ)，所以關(guān)閉瀏覽器會(huì)清除數(shù)據(jù)。和localstorage具有相同的方法。
在前端開(kāi)發(fā)中緩存是必不可少的，那么使用怎樣的緩存方式更高效、讓我們項(xiàng)目的性能更優(yōu)，還是需要我們仔細(xì)斟酌。

了解了Web緩存的基本原理和重要性，接下來(lái)的問(wèn)題就是如何在項(xiàng)目里使用。
? 對(duì)于使用nginx或者apache做為Web前端的系統(tǒng)，有相應(yīng)的指令達(dá)成目的，資料很多，比如可以參考NGINX下配置CACHE-CONTROL頭部。
? 對(duì)于使用高版本Tomcat的項(xiàng)目，沒(méi)有必要自造輪子，官方實(shí)現(xiàn)的ExpiresFilter已經(jīng)可以滿足日常的使用，具體方法可以參考ExpiresFilter官方文檔和Tomcat性能調(diào)優(yōu) 通過(guò)ExpiresFilter設(shè)置資源緩存。
? 對(duì)于使用低版本Tomcat的項(xiàng)目來(lái)說(shuō)，雖然沒(méi)有官方的過(guò)濾器可用，但可以自定義過(guò)濾器來(lái)實(shí)現(xiàn)緩存，具體方法可以參考tomcat中Cache-Control 的配置和使用Cache-Control和gzip提升tomcat應(yīng)用性能(整理)，代碼和配置都比較簡(jiǎn)單，很好理解。

啟用Web緩存之后，瀏覽器的緩存行為與用戶的操作方式有關(guān)系，驗(yàn)證緩存特性開(kāi)啟的時(shí)候不要被假象蒙蔽。
使用Tomcat做應(yīng)用容器，修改應(yīng)用的Web.xml，增加緩存過(guò)濾器的配置，指定max-age為2周，此時(shí)使用Chrome訪問(wèn)應(yīng)用的頁(yè)面：
? 在瀏覽器地址欄里輸入U(xiǎn)RL，多次按回車(chē)，使用調(diào)試器可以觀察到除了第一次訪問(wèn)頁(yè)面，瀏覽器需要從Web服務(wù)器請(qǐng)求靜態(tài)資源，一旦靜態(tài)資源下載完畢，Chrome后續(xù)直接從本地緩存中加載資源，不再向Web服務(wù)器發(fā)起請(qǐng)求；
? 按F5刷新頁(yè)面或者右鍵菜單重新加載頁(yè)面，瀏覽器向Web服務(wù)器發(fā)起加載靜態(tài)資源的請(qǐng)求，Web服務(wù)器返回狀態(tài)碼304，表示資源未變化。