利用HTTP Cache來最佳化網站

對於網站來說，速度是第一位的。使用者總是討厭等待，面對載入的Video和頁面，是非常糟糕的使用者體驗。所以如何利用Cache來最佳化網站，值得深入研究。

什麼是緩衝？

緩衝是一個到處都存在的用空間換時間的例子。通過使用多餘的空間，我們能夠擷取更快的速度。使用者在瀏覽網站的時候，瀏覽器能夠在本地儲存網站中的圖片或者其他檔案的副本，這樣使用者再次訪問該網站的時候，瀏覽器就不用再下載全部的檔案，減少了下載量意味著提高了頁面載入的速度。

下面這個圖例說明了瀏覽器和伺服器之間如何進行互動。

緩衝的缺點

緩衝非常有用，但是也帶來了一定的缺陷。當我們的網站發生了更新的時候，比如說Logo換了，瀏覽器本地仍儲存著舊版本的Logo，那麼瀏覽器如何來確定使用本地檔案還是使用伺服器上的新檔案？下面來介紹幾種判斷的方法。

Caching Method 1：Last-Modified

伺服器為了通知瀏覽器當前檔案的版本，會發送一個上次修改時間的標籤，例如：

Last-modified: Fri, 16 Mar 2007 04:00:25 GMT

File Contents (could be an image, HTML, CSS, Javascript...)

這樣瀏覽器就知道他收到的這個檔案建立時間，在後續的請求中，瀏覽器會按照下面的規則進行驗證：

1、瀏覽器：Hey，我需要logo.png這個檔案，如果是在  Fri, 16 Mar 2007 04:00:25 GMT 之後修改過的，請發給我。

2、伺服器：（檢查檔案的修改時間）

3、伺服器：Hey，這個檔案在那個時間之後沒有被修改過，你已經有最新的版本了。

4、瀏覽器：太好了，那我就顯示給使用者了。

在這種情況下，伺服器僅僅返回了一個304的回應標頭，減少了響應的資料量，提高了響應的速度。

Caching Method 2: ETag

通常情況下，通過修改時間來比較檔案是可行的。但是在一些特殊情況，例如伺服器的時鐘發生了錯誤，伺服器時鐘進行修改，夏時制DST到來後伺服器時間沒有及時更新，這些都會引起通過修改時間比較檔案版本的問題。

ETag可以用來解決這種問題。ETag是一個檔案的唯一標誌符。就像一個雜湊或者指紋，每個檔案都有一個單獨的標誌，只要這個檔案發生了改變，這個標誌就會發生變化。

伺服器返回ETag標籤：

ETag: ead145f

File Contents (could be an image, HTML, CSS, Javascript...)

接下來的訪問順序如所示：

1、瀏覽器：Hey，我需要Logo.png這個檔案，有沒有不匹配“ead145f”這個串的

2、伺服器：（檢查ETag...）

3、伺服器：Hey，我這裡的版本也是"ead145f"，你已經是最新的版本了

4、瀏覽器：好，那就可以使用本機快取了

如同 Last-modified 一樣，ETag 解決了檔案版本比較的問題。只不過 ETag 的層級比 Last-Modified 高一些。

Caching Method 3：Expires

緩衝一個檔案，並且與伺服器確認版本的方式非常好，但是仍有一個缺點，我們必須串連伺服器。每次使用前都進行一次比較，這種方法很安全，但還不是最好的。我們可以使用 Expiration Date 來減少這種請求。

就像我們用牛奶來煮麥片一樣，每次喝之前都要檢查一下牛奶是否安全。但是如果我們知道牛奶的到期時間，我們就可以在到期之前，直接使用而不用再送去檢查。一旦超過了到期時間，我們再去買一份新的回來。伺服器返回的時候，會帶上這份資料的到期時間：

Expires: Tue, 20 Mar 2007 04:00:25 GMT

File Contents (could be an image, HTML, CSS, Javascript...)

這樣，在到期之前，我們就避免了和伺服器之間的串連。瀏覽器只需要自己判斷手中的材料是否到期就可以了，完全不需要增加伺服器的負擔。

Caching Method 4：Max-age

Expires的方法很好，但是我們每次都得算一個精確的時間。max-age 標籤可以讓我們更加容易的處理到期時間。我們只需要說，這份資料你只能用一個星期就可以了。

Max-age 使用秒來計量，下面是一些常用的單位：

1 days in seconds = 86400

1 week in seconds = 604800

1 month in seconds = 2629000

1 year in seconds = 31536000

額外的標籤

緩衝標籤永遠不會停止工作，但是有時候我們需要對已經緩衝的內容進行一些控制。

     Cache-control: public 表示緩衝的版本可以被Proxy 伺服器或者其他中間伺服器識別。

     Cache-control: private 意味著這個檔案對不同的使用者是不同的。只有使用者自己的瀏覽器能夠進行緩衝，公用的Proxy 伺服器不允許緩衝。

     Cache-control: no-cache 意味著檔案的內容不應當被緩衝。這在搜尋或者翻頁結果中非常有用，因為同樣的URL，對應的內容會發生變化。

注意：有些標籤只是在支援HTTP/1.1的瀏覽器上可用，如果想要瞭解更多，那麼推薦RFC2616以及Cache docs。

參考資料：

1、How to Optimize Your Site with HTTP Caching