讓你的站點更好地利用瀏覽器緩存

當我們想盡辦法提高服務器負載能力的時候，是否曾想過，其實瀏覽器也有緩存功能，我們也可以利用瀏覽器的緩存功能來減少服務器的負載，提高網站吞吐量？本章我們就來講講瀏覽器的緩存功能並加以利用。 

當我們使用抓包工具查看http狀態時，我們可以看到200，304，from cache之類的標識，也許你也早已注意到了他們，並明白他們的意思。但是，你是否想過在你的程序中加入代碼主動告訴瀏覽器，更好地利用瀏覽器緩存。 

備註：本章所有案例都是使用chrome 17.0.963.79 m瀏覽器，測試方式爲每次打開瀏覽器新窗口的方式測試，而不是F5刷新。 

我們先做一個沒有緩存的頁面，叫做nocache.php
代碼如下：

<?php
echo time();
?>

用瀏覽器打開，我們可以看到每次打開頁面，都是打印新的時間，返回的狀態碼是200，表明在默認情況下，我們的瀏覽器沒有使用緩存。

我們再做一個頁面，叫做last_modified.php
代碼如下：

<?php
$cache_time = 3600;
$modified_time = @$_SERVER['HTTP_IF_MODIFIED_SINCE'];
if( strtotime($modified_time)+$cache_time > time() ){
    header("HTTP/1.1 304");
    exit;
}
header("Last-Modified: ".gmdate("D, d M Y H:i:s", time() )." GMT");
echo time();
?>

用瀏覽器打開，我們可以看到第一次打開，返回的狀態碼爲200，打印時間爲最新時間。然後我們第二次打開，可以看到狀態碼爲304，時間和剛纔的時間一樣，表明我們是使用到緩存了。我們刪除last_modified.php文件，然後第三次打開頁面，瀏覽器返回404錯誤，可見Last-Modified雖然使用了緩存，但是每次打開頁面依然需要向服務器發起http請求，瀏覽器根據用戶的$_SERVER['HTTP_IF_MODIFIED_SINCE']來判斷瀏覽器的內容是否過期，沒過期的話返回304狀態，瀏覽器內容從緩存中讀取。

我們再做一個頁面，叫做 expires.php
代碼如下：

<?php
$cache_time = 3600;
header("Expires: ".gmdate("D, d M Y H:i:s", time()+$cache_time )." GMT");
echo time();
?>

用瀏覽器打開，我們可以看到第一打開，返回的狀態爲200，時間爲最新的時間。然後我們第二次打開，可以看到狀態碼依然是200，時間依然是舊的時間，Size欄目顯示爲from cache，表示內容是直接從瀏覽器讀取。我們刪除expires.php文件，然後第三次在新窗口中打開，可以看到返回200狀態碼，打印時間依然是舊的，Size依然提示爲from cache，由此可見，設置了Expires，就算刪除頁面，瀏覽器端依然可以顯示，表明瀏覽器根本就沒有向服務器發起http請求。 

到這裏，也許你會感覺Expires比Last-Modified緩存效果更好是吧，因爲本地有緩存數據時，不需要向服務器發起http請求，服務器的併發數會明顯的減少，可以少處理很多http請求。但是Expires也有缺點，那就是設置的過期時間是服務器的時間，而不是你本地的時間，這樣如果服務器時間跟你本地時間不一致時，可能並沒有起到緩存的效果。HTTP/1.1爲了彌補Expirse的不足，引入了Cache-Control標記。格式如下Cache-Control: max-age=<second>，這個時間是相對瀏覽器本地時間，所以更加準確。

我們再做一個頁面，叫做cached_control.php
代碼如下：

<?php
$cache_time = 3600;
header("Cache-Control: max-age=".$cache_time);
echo time();
?>

我們測試可以得到設置Expires一樣的效果，也就是緩存後，刪除文件，依然在瀏覽器緩存有效期內可以正常訪問頁面。 

好了，over了，下次當你服務器併發太高，服務器資源和帶寬資源不足時，請記住偉大的瀏覽器緩存吧！也許你依然不以爲然，覺得提高服務器的吞吐量有很多辦法，比如在服務器端做緩存，把頁面靜態化，等等。但是我相信有一個東西你應該會在意，沒錯，就是帶寬，在意吧？如果能利用好瀏覽器緩存，將可以降低你的寬帶資源，這樣不是很好嗎。