在前端開發中，性能一直都是被你們所重視的一點，然而判斷一個網站的性能最直觀的就是看網頁打開的速度。其中提升網頁反應速度的一個方式就是使用緩存。一個優秀的緩存策略能夠縮短網頁請求資源的距離，減小延遲，而且因爲緩存文件能夠重複利用，還能夠減小帶寬，下降網絡負荷。那麼下面咱們就來看看服務器端緩存的原理。css
緩存分類
web緩存分爲不少種，好比數據庫緩存、代理服務器緩存、還有咱們熟悉的CDN緩存，以及瀏覽器緩存。對於太多文字的閱讀其實我是拒絕的，因而就畫了個圖來解釋下。html
瀏覽器經過代理服務器向源服務器發起請求的原理以下圖，前端
瀏覽器先向代理服務器發起Web請求，再將請求轉發到源服務器。它屬於共享緩存，因此不少地方均可以使用其緩存資源，所以對於節省流量有很大做用。web
瀏覽器緩存是將文件保存在客戶端，在同一個會話過程當中會檢查緩存的副本是否足夠新，在後退網頁時，訪問過的資源能夠從瀏覽器緩存中拿出使用。經過減小服務器處理請求的數量，用戶將得到更快的體驗數據庫
下面我就來着重講下傳說中的瀏覽器緩存。瀏覽器
瀏覽器緩存
頁面的緩存狀態是由header決定的，header的參數有四種：緩存
1、Cache-Control：服務器
一、max-age（單位爲s）指定設置緩存最大的有效時間，定義的是時間長短。當瀏覽器向服務器發送請求後，在max-age這段時間裏瀏覽器就不會再向服務器發送請求了。網絡
咱們來找個資源看下。好比shang.qq.com上的css資源，max-age=2592000，也就是說緩存有效期爲2592000秒（也就是30天）。因而在30天內都會使用這個版本的資源，即便服務器上的資源發生了變化，瀏覽器也不會獲得通知。max-age會覆蓋掉Expires，後面會有討論。session
二、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就認爲資源仍是沒有修改的。
使用緩存流程
仍是用圖說話，下面是我所總結的從瀏覽器請求到展現資源的過程：
cache-control指令使用
說了那麼多cache-control的指令，那麼如何選擇使用哪些指令呢？我仍是不說話==
額外的
除了開頭提到的那麼多緩存方式之外，還有一種咱們都熟悉的緩存方式，LocalStorage和sessionStorage（好像是兩種23333）。
LocalStorage是一種本地存儲的公共資源，域名下不少應用共享這份資源會有風險；LocalStorage是以頁面域名劃分的，若是有多個等價域名之間的LocalStorage不互通，則會形成緩存多份浪費。
LocalStorage在PC上的兼容性不太好，並且當網絡速度快、協商緩存響應快時使用localStorage的速度比不上304。而且不能緩存css文件。而移動端因爲網速慢，使用localStorage要快於304。
在html中加載一個png圖，首次加載的時候時間以下圖，
然而將圖片使用了LocalStorage存儲後，再次刷新後加載時間爲0。
而相對LocalStorage來講，SessionStorage的數據只存儲到特定的會話中，不屬於持久化的存儲，因此關閉瀏覽器會清除數據。和localstorage具備相同的方法。
在前端開發中緩存是必不可少的，那麼使用怎樣的緩存方式更高效、讓咱們項目的性能更優，仍是須要咱們仔細斟酌。