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

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

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

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

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

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

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

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

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

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

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

4、private 響應只作為私有的緩存（見下圖），不能在用戶間共享。如果要求HTTP認證，響應會自動設置為private。

5、no-cache 指定不緩存響應，表明資源不進行緩存

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

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

服務器端文件的最后修改時間，需要和cache-control共同使用，是檢查服務器端資源是否更新的一種方式。當瀏覽器再次進行請求時，會向服務器傳送If-Modified-Since報頭，詢問Last-Modified時間點之后資源是否被修改過。如果沒有修改，則返回碼為304，使用緩存；如果修改過，則再次去服務器請求資源，返回碼和首次請求相同為200，資源為服務器最新資源。
如下圖，最后修改時間為2014年12月19日星期五2點50分47秒

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

使用ETag可以解決Last-modified存在的一些問題：

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

還是用圖說話，下面是我所總結的從瀏覽器請求到展示資源的過程（非常重要）：

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

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

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

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

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

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

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