1??????????前言

頁面緩存一直是前端開發中我們關注比較少的，研究了一些資料，總結了一些心得，記錄下來共同探討。

合理的頁面緩存可以讓頁面執行的效率提高很多（在第一次訪問或者CTRL+F5強制刷新的時候，緩存的效果是體現不出來的），而不是我們一味的設置cache-control為no-cache。

當然了如果緩存使用不當，也會帶來麻煩，比如緩存參數設置不合理，會導致請求得到的是舊的頁面元素。

2??????????緩存原理

首先一開始我們要明確頁面緩存的原理以及過程。

緩存的原理大體是在瀏覽器對資源的第一次請求之后，把資源中的一部分存儲在計算機的臨時文件空間，再次請求的時候，按照特定的策略加載緩存的資源，減少HTTP請求次數與傳輸數據量，以此提高瀏覽效率。

以下是一個請求的過程講解。

2.1??????第一次請求

打開一個瀏覽器如IE，這時候瀏覽器會對自身設置的參數進行加載，其中就包括緩存設置參數。

接下來我們在地址欄輸入一個url，這時候瀏覽器會發送一個簡單的HTTP請求報文頭給應用服務器，這個報文頭主要包含的信息是請求的url，接受的編碼約定，緩存控制等信息。

典型的請求報文頭：

服務器接受到了請求報文頭，一堆業務處理完畢之后，會給出HTTP響應報文，響應報文格式分為報文頭和報文體，響應報文頭中的信息是很重要的，我們以一個圖片響應報文頭為例講解相關內容：

這個響應報文頭可以看到以下信息：

??響應狀態碼是200，說明是正確返回。

??cache-control設定了有效時間，在這個時間內新打開新網頁（或者地址欄回車）不需要去請求服務器。

報文內容類型是image/gif。

??最近修改時間是2008-7-30 10:23:00，最近修改時間在瀏覽器刷新的時候有很大的用處，瀏覽器刷新的時候，會發送對該圖片請求的報文，得到的響應報文中如果最近修改時間和緩存的一致，那么瀏覽器將會從緩存中讀取該圖片的信息（狀態碼是304），如果兩個時間不一致，會從服務器請求得到最新的文件，并緩存。

??服務器類型等其他信息。

該響應報文接受到之后，瀏覽器解讀報文體內容，并打開顯示給用戶，這是主要的工作。

除此之外，瀏覽器還根據報文頭的信息，確定一些緩存規則，比如no-cache的不緩存，設置了max-age的再次打開不請求等，更多的信息可以參考三、四章節。

2.2??????再次請求

再次請求的時候，才是緩存顯現身手的時候。

還是以上面請求的那個圖片（設置了max-age）為例。

如果這個時候我們在地址欄按照原有url回車的話，針對該圖片，是沒有發送HTTP請求的，更沒有請求服務器資源，瀏覽器直接從緩存空間讀取該圖片。

如果這個時候刷新，則是發送HTTP請求，得到以下的響應報文：

檢查服務器，得知該文件沒有修改，那么瀏覽器將從緩存中獲取該圖片。

3??????????緩存對象

頁面緩存，主要緩存什么東西呢？我們首先要明確一下Content-Type的概念。

我們知道HTTP協議是類似MIME的消息結構，MIME類型是和文檔的后綴名相關的，我們在請求服務器然后獲取到數據，我們只得到了數據，并不知道文檔后綴的名字（比如沒辦法區分css和js），這時候服務器必須使用附加的信息來告訴客戶端數據的類型，服務器在發送真正的數據之前，就要先發送標志數據的MIME類型的信息，這個信息使用Content-type關鍵字進行定義，常見的有text/html、text/css、application/x-javascript、image/gif、image/jpeg、audio/x-mpegurl等，如果這些類型是瀏覽器能直接識別的，那么瀏覽器就直接打開顯示出來，否則要關聯注冊表，找到對應的程序來打開，比如audio。

更多的內容可以百度一下MIME類型。

頁面緩存緩存對象除了text/html之外，image/gif、image/jpeg的cache-control一般都通過設置max-age來實現緩存，application/x-javascript通過Last-Modified或者ETags來實現。

4??????????緩存規則

怎么來設定緩存呢？主要有以下三種手段：

4.1??????默認緩存規則

應用服務器是有默認緩存規則的，比如緩存對象他content-type=text/html，應用服務器給出的默認響應報文頭中，cache-control一般都設置為private。

常見的tomcat和weblogic默認緩存規則是存在差異的。當然這些應用服務器的默認緩存規則是可以通過配置來修改的。

4.2??????單個設定

單個設定就是我們常見的，在html的meta區域設置cache-control，max-age，expires等。應用服務器在解析到這些參數之后，會在響應報文中明確指出，告訴瀏覽器當前頁面的緩存規則。

具體內容可以參考《http meta?簡介》。

4.3??????批量設定

l??過濾器

對同一類頁面元素實施相同的緩存策略，可以使用過濾器來實現，通過判定緩存對象類型，在相應中添加相同的緩存規則。

具體代碼參考web.xml和ResponseHeaderFilter.java。

l??eTags

參考http://www.infoq.com/articles/etags。

翻譯版《使用ETags減少Web應用帶寬和負載》。

5??????????IE重新瀏覽方式對緩存的影響

（這部分內容是自己測試的成果，相信存在誤差。）

IE不同的重新瀏覽方式對應的數據請求是有差異的（都可以使用HttpWatch明確看到相應的報文內容）。

5.1??????IE前進，后退

一般來說這種重新瀏覽方式數據都是取自緩存。

比如Cache-control設定為private、must-revalidate、max-age的內容。

Cache-control為no-cache，還需要再次請求服務器，因為這種情況是不會在瀏覽器緩存區留下任何痕跡。

5.2??????IE轉到/地址欄回車

這種情況是根據IE的設置來確定怎么訪問數據，IE的Internet選項中Internet臨時文件的設置有這么幾個選項：每次訪問網頁時檢查、每次啟動IE時檢查、自動（默認）和不檢查，這幾個選項的設定其實是影響發送的HTTP報文表頭的。

僅僅看一下默認情況（自動），自動的話，IE查看指定網頁的時候不檢查上次已經查看過的這個網頁是否已經發生改變（有點繞）。

比如text/html（private）依舊會去請求服務器數據，application/x-javascript等就不再請求服務器了，而是來自緩存。指定了max-age值的img也一樣，不會再去請求服務器，直接取自緩存。

詳細解讀可以參考IE的幫助信息。

5.3??????IE新窗口，如鏈接打開

如果頁面指定cache-control的值為private、no-cache、must-revalidate，那么打開新窗口訪問時都會重新訪問服務器。

如果指定了max-age值，那么在此值內的時間里就不會重新訪問服務器。

5.4??????IE刷新

不管cache-control的為何值，都會檢查服務器。

檢查要訪問網頁的最新版本，如果存在最新版本，則返回最新網頁的內容，并更新緩存；如果不存在最新版本，則只返回標題，內容去緩存中獲取。

5.5??????IE強制刷新（CTRL+F5）

獲取要訪問網頁的服務器最新版本，返回最新的版本，并刪除緩存中的相應內容，將最新的內容寫入緩存。

其實強制刷新情況下，請求的HTTP報文頭里，Cache-control為no-cache。

5.6??????脫機工作

這是一種比較特殊的重新瀏覽方式，這種情況下是沒有任何面向服務器的請求過程的，直接去瀏覽器的緩存尋找數據，如果緩存沒有命中，脫機就沒辦法工作了。

顯而易見的是，no-cache方式，是沒辦法脫機工作的。

總結

以上是生活随笔為你收集整理的页面缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。