瀏覽器緩存

之前老是傻傻的分不清緩存和cookie，誤認爲cookie就是指瀏覽器緩存。還有 cookie localStorage sessionStorage 緩存 四者的關係也沒有搞明白。通過一番折騰，終於從網上找到了一些關於緩存的知識。今天這篇文章就先介紹一下緩存吧。

注：如下內容整理自網絡，另加筆者參考《http權威指南》整理獲得。

在前端開發中，性能一直都是被你們所重視的一點，然而判斷一個網站的性能最直觀的就是看網頁打開的速度。其中提升網頁反應速度的一個方式就是使用緩存。一個優秀的緩存策略能夠縮短網頁請求資源的距離，減小延遲，而且因爲緩存文件能夠重複利用，還能夠減小帶寬，下降網絡負荷。那麼下面咱們就來看看服務器端緩存的原理。

緩存分類

web緩存分爲不少種，好比數據庫緩存、代理服務器緩存、還有咱們熟悉的CDN緩存，以及瀏覽器緩存。對於太多文字的閱讀其實我是拒絕的，因而就畫了個圖來解釋下。
瀏覽器經過代理服務器向源服務器發起請求的原理以下圖

瀏覽器先向代理服務器發起Web請求，再將請求轉發到源服務器。它屬於共享緩存，因此不少地方均可以使用其緩存資源，所以對於節省流量有很大做用。

瀏覽器緩存是將文件保存在客戶端，在同一個會話過程當中會檢查緩存的副本是否足夠新，在後退網頁時，訪問過的資源能夠從瀏覽器緩存中拿出使用。經過減小服務器處理請求的數量，用戶將得到更快的體驗
下面我就來着重講下傳說中的瀏覽器緩存。

瀏覽器緩存

頁面的緩存狀態是由header決定的，header的參數有四種：

1、 Cache-Control（重要策略）：

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

一、max-age（單位爲s）指定設置緩存最大的有效時間，定義的是時間長短。當瀏覽器向服務器發送請求後，在max-age這段時間裏瀏覽器就不會再向服務器發送請求了。
咱們來找個資源看下。好比shang.qq.com上的css資源，max-age=2592000，也就是說緩存有效期爲2592000秒（也就是30天）。因而在30天內都會使用這個版本的資源，即便服務器上的資源發生了變化，瀏覽器也不會獲得通知。max-age會覆蓋掉Expires，後面會有討論。

二、s-maxage（單位爲s）同max-age，只用於共享緩存（好比CDN緩存）。
好比，當s-maxage=60時，在這60秒中，即便更新了CDN的內容，瀏覽器也不會進行請求。也就是說max-age用於普通緩存，而s-maxage用於代理緩存。若是存在s-maxage，則會覆蓋掉max-age和Expires header。
三、public 指定響應會被緩存，而且在多用戶間共享。也就是下圖的意思。若是沒有指定public仍是private，則默認爲public。

四、private 響應只做爲私有的緩存（見下圖），不能在用戶間共享。若是要求HTTP認證，響應會自動設置爲private。

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

可是設置了no-cache以後並不表明瀏覽器不緩存，而是在緩存前要向服務器確認資源是否被更改。所以有的時候只設置no-cache防止緩存仍是不夠保險，還能夠加上private指令，將過時時間設爲過去的時間。
六、no-store 絕對禁止緩存，一看就知道若是用了這個命令固然就是不會進行緩存啦～每次請求資源都要從服務器從新獲取。
七、must-revalidate指定若是頁面是過時的，則去服務器進行獲取。這個指令並不經常使用，就不作過多的討論了。

2、Expires

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

3、Last-modified

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

4、ETag

根據實體內容生成一段hash字符串，標識資源的狀態，由服務端產生。瀏覽器會將這串字符串傳回服務器，驗證資源是否已經修改，若是沒有修改，過程以下：

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

a、某些服務器不能精確獲得資源的最後修改時間，這樣就沒法經過最後修改時間判斷資源是否更新 
b、若是資源修改很是頻繁，在秒如下的時間內進行修改，而Last-modified只能精確到秒 
c、一些資源的最後修改時間改變了，可是內容沒改變，使用ETag就認爲資源仍是沒有修改的。

使用緩存流程

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

Etag/If-None-Match
Etag/If-None-Match也要配合Cache-Control使用。
lEtag：web服務器響應請求時，告訴瀏覽器當前資源在服務器的惟一標識（生成規則由服務器以爲）。Apache中，ETag的值，默認是對文件的索引節（INode），大小（Size）和最後修改時間（MTime）進行Hash後獲得的。
lIf-None-Match：當資源過時時（使用Cache-Control標識的max-age），發現資源具備Etage聲明，則再次向web服務器請求時帶上頭If-None-Match（Etag的值）。web服務器收到請求後發現有頭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），發現資源具備Last-Modified聲明，則再次向web服務器請求時帶上頭If-Modified-Since，表示請求時間。web服務器收到請求後發現有頭If-Modified-Since則與被請求資源的最後修改時間進行比對。若最後修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應消息包體內），HTTP 200；若最後修改時間較舊，說明資源無新修改，則響應HTTP 304 (無需包體，節省瀏覽)，告知瀏覽器繼續使用所保存的cache。

既生Last-Modified何生Etag？
你可能會以爲使用Last-Modified已經足以讓瀏覽器知道本地的緩存副本是否足夠新，爲何還須要Etag（實體標識）呢？HTTP1.1中Etag的出現主要是爲了解決幾個Last-Modified比較難解決的問題：
1.Last-Modified標註的最後修改只能精確到秒級，若是某些文件在1秒鐘之內，被修改屢次的話，它將不能準確標註文件的修改時間
2.若是某些文件會被按期生成，當有時內容並無任何變化，但Last-Modified卻改變了，致使文件無法使用緩存
3.有可能存在服務器沒有準確獲取文件修改時間，或者與代理服務器時間不一致等情形
Etag是服務器自動生成或者由開發者生成的對應資源在服務器端的惟一標識符，可以更加準確的控制緩存。Last-Modified與ETag是能夠一塊兒使用的，服務器會優先驗證ETag，一致的狀況下，纔會繼續比對Last-Modified，最後才決定是否返回304。

cache-control指令使用

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

另外的緩存方式：LocalStorage和sessionStorage

除了開頭提到的那麼多緩存方式之外，還有一種咱們都熟悉的緩存方式，LocalStorage和sessionStorage（好像是兩種23333）。
LocalStorage是一種本地存儲的公共資源，域名下不少應用共享這份資源會有風險；LocalStorage是以頁面域名劃分的，若是有多個等價域名之間的LocalStorage不互通，則會形成緩存多份浪費。
LocalStorage在PC上的兼容性不太好，並且當網絡速度快、協商緩存響應快時使用localStorage的速度比不上304。而且不能緩存css文件。而移動端因爲網速慢，使用localStorage要快於304。
而相對LocalStorage來講，SessionStorage的數據只存儲到特定的會話中，不屬於持久化的存儲，因此關閉瀏覽器會清除數據。和localstorage具備相同的方法。
在前端開發中緩存是必不可少的，那麼使用怎樣的緩存方式更高效、讓咱們項目的性能更優，仍是須要咱們仔細斟酌。

如何啓用Web緩存

啓用緩存

瞭解了Web緩存的基本原理和重要性，接下來的問題就是如何在項目裏使用。
 對於使用nginx或者apache作爲Web前端的系統，有相應的指令達成目的，資料不少，好比能夠參考NGINX下配置CACHE-CONTROL頭部。
 對於使用高版本Tomcat的項目，沒有必要自造輪子，官方實現的ExpiresFilter已經能夠知足平常的使用，具體方法能夠參考ExpiresFilter官方文檔和Tomcat性能調優 經過ExpiresFilter設置資源緩存。
 對於使用低版本Tomcat的項目來講，雖然沒有官方的過濾器可用，但能夠自定義過濾器來實現緩存，具體方法能夠參考tomcat中Cache-Control 的配置和使用Cache-Control和gzip提高tomcat應用性能(整理)，代碼和配置都比較簡單，很好理解。

注意點

啓用Web緩存以後，瀏覽器的緩存行爲與用戶的操做方式有關係，驗證緩存特性開啓的時候不要被假象矇蔽。使用Tomcat作應用容器，修改應用的Web.xml，增長緩存過濾器的配置，指定max-age爲2周，此時使用Chrome訪問應用的頁面： 在瀏覽器地址欄裏輸入URL，屢次按回車，使用調試器能夠觀察到除了第一次訪問頁面，瀏覽器須要從Web服務器請求靜態資源，一旦靜態資源下載完畢，Chrome後續直接從本地緩存中加載資源，再也不向Web服務器發起請求； 按F5刷新頁面或者右鍵菜單從新加載頁面，瀏覽器向Web服務器發起加載靜態資源的請求，Web服務器返回狀態碼304，表示資源未變化。