關於瀏覽器快取問題304響應狀態簡單介紹

antzone發表於2017-04-03
瀏覽器快取

本章節將介紹一下關於http請求304狀態內容，其實也就是瀏覽器快取問題。

下面先看一個圖片:

a:3:{s:3:\"pic\";s:43:\"portal/201704/03/115038pmaqta7emdstseyy.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

狀態是304的相關內容並不是從伺服器下載的，而是讀取的本地快取的內容。

這對於優化網站的效能具有很重要的意義，充分利用好快取，可以極大提高頁面瀏覽速度。

下面就介紹一下關於瀏覽器快取的相關知識，需要的朋友可以做一下參考。

瀏覽器可以快取訪問過的網頁檔案，快取的內容不僅僅有網頁檔案，還包括上一次伺服器發過來的該檔案的最後伺服器修改時間。

If-Modified-Since是標準的HTTP請求頭標籤，它對應的就是伺服器傳送過來的該檔案的最後伺服器修改時間。

在傳送http請求的時候，就會將這個最後修改的時間傳送到伺服器，然後伺服器會將這個時間與伺服器上當前檔案最後修改時間進行比對，如果時間一致，方式如下:

（1）.那麼返回HTTP狀態碼304（不返回檔案內容），客戶端接到之後，就直接把本地快取文 件顯示到瀏覽器中。

（2）.如果時間不一致（說明伺服器有了更新的檔案），就返回HTTP狀態碼200和新的檔案內容，客戶端接到之後，會丟棄舊檔案，把新檔案 快取起來，並顯示到瀏覽器中。

程式碼例項分析:

現在我們在伺服器建立一個簡單的html檔案，然後使用瀏覽器進行請求，下面是使用Fiddler捕獲相關資訊。

圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/03/115122znn94kz22ww1n1f4.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

（1）.因為是第一次訪問該頁面，客戶端發請求時，請求頭中沒有If-Modified-Since標籤。

（2）.伺服器返回的HTTP狀態碼是200，併傳送頁面的全部內容。

（3）.伺服器返回的HTTP頭標籤中有Last-Modified，告訴客戶端頁面的最後修改時間。

下面我們重新整理一下頁面，再進行一次請求，圖示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201704/03/115201nj98wni2ud88njd2.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

（1）.客戶端發HTTP請求時，使用If-Modified-Since標籤，把上次伺服器告訴它的檔案最後修改時間 返回到伺服器端了。

（2）.因為檔案沒有改動過，所以伺服器返回的HTTP狀態碼是304，沒有Last-Modified，也沒有傳送頁面的內容。

下面我們修改一下網頁檔案，Fiddler捕獲的請求資訊如下圖:

a:3:{s:3:\"pic\";s:43:\"portal/201704/03/115247h5ooidi2tiyudpue.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

（1）.客戶端發HTTP請求時，使用If-Modified-Since標籤，把上次伺服器告訴它的檔案最後修改時間 返回到伺服器端了。

（2）.因為檔案被改動過，兩邊時間不一致，所以伺服器返回的HTTP狀態碼是200，併傳送新頁面的全 部內容。

（3）.伺服器返回的HTTP頭標籤中有Last-Modified，告訴客戶端頁面的新的最後修改時間。

清除瀏覽器快取:

在實際應用中，可能並不需要瀏覽器快取，但是也不能要求使用者去人為的手動清空瀏覽器快取。

所以需要使用一些技巧實現此功能，具體可以參閱js如何實現清空瀏覽器快取程式碼例項一章節。

相關文章