瀏覽器緩存實現原理

瀏覽器緩存將文件保存在客戶端，好的緩存策略可以減少對網絡帶寬的佔用，可以提高訪問速度，提高用戶的體驗，還可以減輕服務器的負擔。因此我們有必要了解它的實現原理，用來提高網站的性能。
當一個客戶端請求web服務器, 請求的內容可以從以下幾個地方獲取：服務器、瀏覽器緩存中或緩存服務器中。這取決於服務器端輸出的頁面信息。頁面文件有三種緩存狀態。
1.最新的：選擇不緩存頁面，每次請求時都從服務器獲取最新的內容。
2.未過期的：在給定的時間內緩存，如果用戶刷新或頁面過期則去服務器請求，否則將讀取本地的緩存，這樣可以提高瀏覽速度。
3.過期的：也就是陳舊的頁面，當請求這個頁面時，必須進行重新獲取。

頁面的緩存狀態是由http header決定的，一個瀏覽器請求信息，一個是服務器響應信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0規定，Cache-Control由HTTP/1.1規定。

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做比較

如IE的設置裏面有四種方式(如圖)的"每次訪問頁面檢查"，用戶使用重新加載或超過了過期日期，瀏覽器就會認爲這個頁面是陳舊的(它將發送附加一個If - Modified-Since的信息. 如果頁面沒有改變，服務器端響應一個304狀態 Not Modified，而不發送整個頁面，這樣就會很快，但服務器必須要生成有效的Last-Modified headers且服務器時間必須是有效的。



一個不進行緩存的服務器端響應

HTTP/1.0 200 OK
Content-Type: text/html
Content-Length: 19662
Pragma: no-cache
Cache-Control: no-cache
Server: Roxen/2.1.185
Accept-Ranges: bytes
Expires: Wed, 03 Jan 2001 00:18:55 GMT

有時候僅僅設置Pragma: no-cache Cache-Control: no-cache 還是不保險，需要將過期時間設置成過去的時間就確保了對象不被緩存。

一個允許緩存的服務器端響應

HTTP/1.1 200 OK
Date: Tue, 13 Feb 2001 14:50:31 GMT
Server: Apache/1.3.12
Cache-Control: max-age=43200
Expires: Wed, 14 Feb 2001 02:50:31 GMT
Last-Modified: Sun, 03 Dec 2000 23:52:56 GMT
ETag: "1cbf3-dfd-3a2adcd8"
Accept-Ranges: bytes
Content-Length: 3581
Connection: close
Content-Type: text/html

Cache-Control: max-age=43200 表示緩存12個小時

我們來看一個瀏覽器緩存的具體例子
第一次請求文件
Request：
GET /file.html HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, application/x-comet, */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
Host: 24.5.203.101
Connection: Keep-Alive

Response：
HTTP/1.1 200 OK
Date: Tue, 13 Feb 2001 20:00:22 GMT
Server: Apache
Cache-Control: max-age=604800
Last-Modified: Wed, 29 Nov 2000 15:28:38 GMT
ETag: "1df-28f1-3a2520a6"
Accept-Ranges: bytes
Content-Length: 10481
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html

這裏返回了Last-Modified和ETag，這兩個信息就是用來以後比較當前瀏覽器緩存的文件是否和服務器端文件一致，如果不一直就獲取最新，一直則讀取本地緩存。

第二次請求
Request：
GET /file.html HTTP/1.1
Accept: */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
If-Modified-Since: Wed, 29 Nov 2000 15:28:38 GMT
If-None-Match: "1df-28f1-3a2520a6"
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
Host: 24.5.203.101
Connection: Keep-Alive

Response：
HTTP/1.1 304 Not Modified
Date: Tue, 13 Feb 2001 20:01:07 GMT
Server: Apache
Connection: Keep-Alive
Keep-Alive: timeout=5, max=100
ETag: "1df-28f1-3a2520a6"
Cache-Control: max-age=604800

請求中的If-None-Match信息就是第一次響應的ETag，用來驗證和當前響應的ETag是否一致。服務器返回Not Modified，瀏覽器就讀取本地緩存。

我們還可以使用專門緩存服務器來改善性能。他的原理和瀏覽器的緩存原理一樣，所有的瀏覽器請求將由緩存服務器響應，緩存服務器可以用自己的緩存文件或獲取新的文件來響應用戶的請求。因此有了緩存服務器的，將大大提高網站的性能。
參考文章：http://www.webperformance.org/caching/caching_for_performance.htmlCreated by jecray