HTTP緩存控制


麥子:聽說啟用客戶端緩存可以減輕服務器的壓力,提高網站的吞吐,那具體是怎么回事呢?

栗子:沒錯,HTTP協議通過一些頭信息在服務器和瀏覽器之間傳遞關於客戶端緩存的信息,使其緩存在瀏覽器端,瀏覽器在下次訪問的時候,便可以直接從客戶的電腦上訪問,而不用從服務器上下載,這樣就減輕了服務器的壓力,而且還使頁面更快速的展示出來。

 

麥子:那對於服務器顯示控制的緩存有時間限制嗎?

栗子:這個需要根據業務決定了,比如一般網站的LOGO、新聞頁面配套的圖片很少發生變化,所以緩存時間可以設置的時間長一些。

通過Cache-control: max-age=指定的秒數,

上面這個頭來控制緩存的時間,下面我們一起通過一個栗子看一下。

首先我們在nginx中顯示的給一個文件設置頭信息,使其在客戶端緩存30秒:

這次我們使用Firefox的F12看一下請求收到的報文如下:

然后我們在30秒之內再次訪問此頁面:

通過觀察,我們發現,這時瀏覽器並沒有發送任何請求,而是直接從瀏覽器中讀取的。

最后在30秒之后,我們再次訪問此頁面,發現瀏覽器重新發送了請求去和服務器端進行鮮活比較,在這個例子中,由於服務器端的文件並沒有發生任何改動,所以返回304,如下:

關於控制緩存時間還有Expires頭,但其設置的是過期日期,一般不推薦使用,這里就不再舉例子了。

 

麥子:那如果緩存的文件過期了怎么辦呢?

栗子:通過文件的修改時間或生成的ETag來決定,下面我們通過實際的例子看一下。

為了實驗方便,我們在本地通過nginx部署一個站點(nginx的操作,我們在以后的文章中會詳細說到),服務器地址是1.1.1.1,我們用Chrome的F12手抓到的響應包如下:

 

 

圖中包含了兩個字段,一個是index.html文件的最新修改時間:Last-Modified字段,我們用ll查看下index.html的最新修改時間,發現二者是一致的(瀏覽器返回的是GMT格式的時間,所以要減去8小時)

另外一個字段是Etag,這個是根據文件的內容生成的

好,這時我們不修改服務器上頁面,然后讓瀏覽器再次打開index.html,我們一起看下請求和回發的報文:

我們發現服務器返回的狀態碼是304,表明服務器上的文件沒有發生改變,可以直接從本地獲取副本,所以服務器只返回了頭信息,而沒有返回主體內容,這樣就節省了網絡流量,降低了傳輸時間。

那服務器上怎么知道瀏覽器緩存的副本和服務器上當時的文本是一致的呢?這就得從上圖Request Headers請求頭中的兩個字段說起了。我們先來看If-Modified-Since,這個字段的值恰恰就是剛才我們第一次請求index.html返回的頭信息中Last-Modified字段的值,這就為服務器是否返回數據內容提供了依據,即根據文件的修改時間進行判斷。我們可以試驗一下:

先用touch命令修改下index.html的“修改時間”為當前時間

然后我們再次使用瀏覽器訪問頁面,這時雖然頁面的內容沒有改變,但由於“修改時間”發生了變化,使瀏覽器提供的If-Modified-Since和服務器的Last-Modified產生了不一致,所以服務器返回了index.html的所有內容,如下圖示:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM