轉載來源：http://www.cnblogs.com/phphuaibei/archive/2011/09/27/2192817.html
前提說明：
緩存技術在在網站應用中非常重要，在減少服務器請求壓力和用戶瀏覽速度加塊方面有着功不可沒的功勞，
昨天在我《網站優化--讓你的網頁飛起來》裏面有人問道關於瀏覽器緩存原理的問題，萌發了我研究緩存技術的興趣，本文主要
介紹瀏覽器的緩存原理。
正文：
緩存技術：
在介紹緩存技術之前，我們先看一張LAMP網站的價格圖，通過架構圖我們可以很清晰的對網站整體緩存有一定認識
LAMP網站結構圖
上面是一種經典的LAMP網站結構圖，通過上圖我們很清楚的看到一個網站從前臺到服務端的整體關係，下面是我根據
上圖畫的一張LAMP緩存圖：
LAMP緩存圖
從圖中我們可以看到網站緩存主要分爲五部分
- 服務器緩存：主要是基於web反向代理的靜態服務器nginx和squid，還有apache2的mod_proxy和mod_cache模塊
- 瀏覽器緩存：包括頁面html緩存和圖片js，css等資源的緩存
- PHP緩存：有很多免費的PHP緩衝加速工具，如apc eaccerlertor等
- 內存緩存：主要是採用memcache這種分佈式緩存機制
- 數據庫緩存：通過配置數據庫緩存，以及數據存儲過程，連接池技術等
下面重點介紹瀏覽器緩存原理：
自己的語言表達能力有限，還是先看圖，比較直觀也比較簡潔：
從上圖：我們可以知道瀏覽器緩存重要分爲兩個部分：
- 頁面html的緩存
- 圖片，css，js，flash等緩存
先介紹頁面緩存的原理
頁面緩存狀態是由http header決定的，一個瀏覽器請求信息，一個是服務器響應信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0規定，Cache-Control由HTTP/1.1規定。
自己畫的工作原理圖：
從圖中我們可以看到原理主要分三步：
- 第一次請求：瀏覽器通過http的header報頭，附帶Expires，Cache-Control，Last-Modified/Etag向服務器請求，此時服務器記錄第一次請求的Last-Modified/Etag
- 再次請求：當瀏覽器再次請求的時候，附帶Expires，Cache-Control，If-Modified-Since/Etag向服務器請求
- 服務器根據第一次記錄的Last-Modified/Etag和再次請求的If-Modified-Since/Etag做對比，判斷是否需要更新，然後響應請求
相關參數說明；
Cache-Control的主要參數
Cache-Control: private/public Public 響應會被緩存，並且在多用戶間共享。 Private 響應只能夠作爲私有的緩存，不能再用戶間共享。
Cache-Control: no-cache：不進行緩存
Cache-Control: max-age=x：緩存時間 以秒爲單位
Cache-Control: must-revalidate：如果頁面是過期的 則去服務器進行獲取。
Expires：顯示的設置頁面過期時間
Last-Modified：請求對象最後一次的修改時間 用來判斷緩存是否過期 通常由文件的時間信息產生
If-Modified-Since ：客戶端發送請求附帶的信息 指瀏覽器緩存請求對象的最後修改日期 用來和服務器端的Last-Modified做比較
Etag：ETag是一個可以 與Web資源關聯的記號（token），和Last-Modified功能纔不多，也是一個標識符，一般和Last-Modified一起使用，加強服務器判斷的準確度
關於圖片，css，js，flash的緩存
這個主要通過服務器的配置來實現這個技術，如果使用apache服務器的話，可以使用mod_expires模塊來實現：
編譯mod_expires模塊：
Cd /root/httpd-2.2.3/modules/metadata
/usr/local/apache/bin/apxs -i -a -c mod_expires.c //編譯
編輯httpd.conf配置：添加下面內容
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
EXpiresByType application/x-shockwave-flash "access plus 1 months"
EXpiresByType application/x-javascript "access plus 1 months"
#ExpiresByType video/x-flv "access plus 1 months"
</IfModule>
解釋：第一句--開啓服務
第二句--默認時間是一個月
在下面是關於各種類型的資源的緩存時間設置
更詳細的說明可以參考我的《網站優化--讓你的網頁飛起來》關於這個模塊的使用介紹
參考資料：http://www.infoq.com/cn/articles/etags
http://www.lifetyper.com/archives/000087.html
http://developer.yahoo.com/performance/rules.html
http://www.websiteoptimization.com/speed/tweak/cache/
http://www.mnot.net/cache_docs/
************************************************************************************
關於瀏覽器緩存的原理介紹就到這裏，如果有什麼錯誤，也希望各位指出，謝謝