在前端開發中，性能一直都是被大家所重視的一點，然而判斷一個網站的性能最直觀的就是看網頁打開的速度。其中提高網頁反應速度的一個方式就是使用緩存。一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，並且由於緩存文件可以重覆利用，還可以減少帶寬，降低網路負荷。那麼下麵我們就來看看伺服器端緩存的原理。 ...

在前端開發中，性能一直都是被大家所重視的一點，然而判斷一個網站的性能最直觀的就是看網頁打開的速度。其中提高網頁反應速度的一個方式就是使用緩存。一個優秀的緩存策略可以縮短網頁請求資源的距離，減少延遲，並且由於緩存文件可以重覆利用，還可以減少帶寬，降低網路負荷。那麼下麵我們就來看看伺服器端緩存的原理。

緩存分類

web緩存分為很多種，比如資料庫緩存、代理伺服器緩存、還有我們熟悉的CDN緩存，以及瀏覽器緩存。對於太多文字的閱讀其實我是拒絕的，於是就畫了個圖來解釋下。

瀏覽器通過代理伺服器向源伺服器發起請求的原理如下圖：

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

瀏覽器緩存是將文件保存在客戶端，在同一個會話過程中會檢查緩存的副本是否足夠新，在後退網頁時，訪問過的資源可以從瀏覽器緩存中拿出使用。通過減少伺服器處理請求的數量，用戶將獲得更快的體驗

下麵我就來著重講下傳說中的瀏覽器緩存。

瀏覽器緩存

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

一、Cache-Control：

1、max-age（單位為s）指定設置緩存最大的有效時間，定義的是時間長短。當瀏覽器向伺服器發送請求後，在max-age這段時間里瀏覽器就不會再向伺服器發送請求了。

我們來找個資源看下。比如shang.qq.com上的css資源，max-age=2592000，也就是說緩存有效期為2592000秒（也就是30天）。於是在30天內都會使用這個版本的資源，即使伺服器上的資源發生了變化，瀏覽器也不會得到通知。max-age會覆蓋掉Expires，後面會有討論。

2、s-maxage（單位為s）同max-age，只用於共用緩存（比如CDN緩存）。

比如，當s-maxage=60時，在這60秒中，即使更新了CDN的內容，瀏覽器也不會進行請求。也就是說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

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

三、Last-modified

伺服器端文件的最後修改時間，需要和cache-control共同使用，是檢查伺服器端資源是否更新的一種方式。當瀏覽器再次進行請求時，會向伺服器傳送If-Modified-Since報頭，詢問Last-Modified時間點之後資源是否被修改過。如果沒有修改，則返回碼為304，使用緩存；如果修改過，則再次去伺服器請求資源，返回碼和首次請求相同為200，資源為伺服器最新資源。

如下圖，最後修改時間為2014年12月19日星期五2點50分47秒