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

頁面的緩存狀態(tài)是由http header決定的，一個(gè)瀏覽器請(qǐng)求信息，一個(gè)是服務(wù)器響應(yīng)信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0規(guī)定，Cache-Control由HTTP/1.1規(guī)定。

Cache-Control的主要參數(shù)

Cache-Control: private/public Public 響應(yīng)會(huì)被緩存，并且在多用戶間共享。 Private 響應(yīng)只能夠作為私有的緩存，不能再用戶間共享。
Cache-Control: no-cache：不進(jìn)行緩存
Cache-Control: max-age=x：緩存時(shí)間 以秒為單位
Cache-Control: must-revalidate：如果頁面是過期的 則去服務(wù)器進(jìn)行獲取。

Expires：顯示的設(shè)置頁面過期時(shí)間
Last-Modified：請(qǐng)求對(duì)象最后一次的修改時(shí)間 用來判斷緩存是否過期 通常由文件的時(shí)間信息產(chǎn)生
If-Modified-Since ：客戶端發(fā)送請(qǐng)求附帶的信息 指瀏覽器緩存請(qǐng)求對(duì)象的最后修改日期 用來和服務(wù)器端的Last-Modified做比較

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



一個(gè)不進(jìn)行緩存的服務(wù)器端響應(yīng)

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

有時(shí)候僅僅設(shè)置Pragma: no-cache Cache-Control: no-cache 還是不保險(xiǎn)，需要將過期時(shí)間設(shè)置成過去的時(shí)間就確保了對(duì)象不被緩存。

一個(gè)允許緩存的服務(wù)器端響應(yīng)

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個(gè)小時(shí)

我們來看一個(gè)瀏覽器緩存的具體例子
第一次請(qǐng)求文件
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，這兩個(gè)信息就是用來以后比較當(dāng)前瀏覽器緩存的文件是否和服務(wù)器端文件一致，如果不一直就獲取最新，一直則讀取本地緩存。

第二次請(qǐng)求
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

請(qǐng)求中的If-None-Match信息就是第一次響應(yīng)的ETag，用來驗(yàn)證和當(dāng)前響應(yīng)的ETag是否一致。服務(wù)器返回Not Modified，瀏覽器就讀取本地緩存。

我們還可以使用專門緩存服務(wù)器來改善性能。他的原理和瀏覽器的緩存原理一樣，所有的瀏覽器請(qǐng)求將由緩存服務(wù)器響應(yīng)，緩存服務(wù)器可以用自己的緩存文件或獲取新的文件來響應(yīng)用戶的請(qǐng)求。因此有了緩存服務(wù)器的，將大大提高網(wǎng)站的性能。