IE下默認會開啟緩存策略,不管是頁面還是通過ajax請求的數據都會議一個url,url是uri(統一資源定位符)的實例,url就是資源的標識符。
寫一個demo進行驗證,測試環境:IE8,node.js 0.12.7,頁面模板為jade。
頁面代碼:testCache.jade
頁面上放一個按鈕,點下后從后台獲取一個自增的數值顯示在按鈕上。
doctype html
html
head
meta(charset='utf-8')
title= title
script(src='/js/jquery-1.10.2.min.js')
script(src="/js/bootstrap.min.js")
body
button(id='btnTest', type='button', class='btn btn-default gap') 測試
script.
$(document).ready(function(){
$('#btnTest').click(doTest);
});
function doTest(){
$.ajax({
type: 'GET',
url: '/cache/data',
data: '',
dataType: 'html'})
.done(function(data){
$('#btnTest').html(data);
})
}
后台關鍵代碼:
//獲取測試頁面
router.get('/cache/page', function(req, res){
res.render('testCache', { title: 'testCache' }); }); //獲取自增數值 var index = 0; router.get('/cache/data', function(req, res){ var data = index++; res.write(data.toString()); res.end(); });
運行效果可以看出無數次瘋狂的點擊后,還是“0”,原因就是IE第一次拿到數據后,從相同路徑獲取數據時采用了默認的緩存策略,當然可以通過IE的設置來規避緩存。
緩存問題,根本上還是響應header的設置問題,只不過IE在發現響應頭中沒有緩存設置項時會采取緩存策略,和其他瀏覽器的處理方式不同而已。
緩存很多時候是必須的,比如:新聞頁面,升級頁面,靜態頁面,這些資源在被訪問后都可以緩存在瀏覽器段,通過根據資源的更新策略來設置規定的過期時間,可降低同服務器的資源獲取次數。
當然在不需要緩存的地方,也要堅決的避免被緩存。
在IE中避免被緩存,如果是一個頁面,那么就要在meta中設置緩存。
<meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="-1"> <meta http-equiv="progma" content="no-cache">
上面的三項設置其實只要cache-control就可以了,本質上來說,在meta中的http-equiv的設置都會有服務器填入頁面的響應header中。
如果是在頁面上通過ajax來獲取數據的,就要在后台數據的響應處,加上緩存的設置,明明白白地告訴瀏覽器,請你不要緩存。如下。
//獲取自增數值 var index = 0; router.get('/cache/data', function(req, res){ var data = index++; res.setHeader('cache-control', 'no-cache'); res.write(data.toString()); res.end(); });
通過設置了no-cache后,本文的demo中的字增值就可以隨着點擊而增加並顯示在按鈕上。
在http的header中,緩存的配置項主要是5種,這里就列一下,網上的說明太多了。
1.cache-control
有4個值,private、no-cache、max-age、must-revalidate。
private:緩存到私有緩存。
max-age:相對過期時間,秒為單位,從瀏覽器獲取資源的相應秒數后過期。
must-revalidate:每次訪問都需要重新驗證。
no-cache:不緩存。
2.expires
過期時間,這是一個絕對時間,時間格式是格林威治時間,如“Sun, 08 Nov2009 03:37:26 GMT”,過了這個時間,就過期
3.progma
對http1.0服務器的兼容。
4.Last-Modified/If-Modified-Since
在你的請求中發送一個 If-Modified-Since 頭信息,它包含了上一次從服務器連同數據所獲得的日期。如果數據從那時起沒有改變,服務器將返回一個特殊的 HTTP 狀態代碼 304。
5.ETag/If-None-Match
服務器發送你所請求的數據的同時,發送某種數據的 hash (在 ETag 頭信息中給出)。hash 的確定完全取決於服務器。當第二次請求相同的數據時,你需要在 If-None-Match: 頭信息中包含 ETag hash,如果數據沒有改變,服務器將返回 304 狀態代碼。