瀏覽器html緩存

瀏覽器緩存將文件保存在客戶端，好的緩存策略能夠減小對網絡帶寬的佔用，能夠提升訪問速度，提升用戶的體驗，還能夠減輕服務器的負擔。所以咱們有必要了解它的實現原理，用來提升網站的性能。

當一個客戶端請求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，瀏覽器就讀取本地緩存。

 

咱們還可使用專門緩存服務器來改善性能。他的原理和瀏覽器的緩存原理同樣，全部的瀏覽器請求將由緩存服務器響應，緩存服務器能夠用本身的緩存文件或獲取新的文件來響應用戶的請求。所以有了緩存服務器的，將大大提升網站的性能。