瀏覽器html緩衝

標籤：style   http   color   使用   os   io   strong   檔案   

瀏覽器緩衝將檔案儲存在用戶端，好的緩衝策略可以減少對網路頻寬的佔用，可以提高訪問速度，提高使用者的體驗，還可以減輕伺服器的負擔。因此我們有必要瞭解它的實現原理，用來提高網站的效能。

當一個用戶端請求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，瀏覽器就讀取本機快取。

 

我們還可以使用專門快取服務器來改善效能。他的原理和瀏覽器的緩衝原理一樣，所有的瀏覽器請求將由快取服務器響應，快取服務器可以用自己的快取檔案或擷取新的檔案來響應使用者的請求。因此有了快取服務器的，將大大提高網站的效能。