對于動態文件,比如 index.asp?id=... 或者 index.aspx?id=... 相信有經驗的程序員都知道怎樣禁止瀏覽器緩存數據了.
但是對于靜態文件(css,jpg,gif等等), 在什么場合下面我們需要禁止瀏覽器緩存他們,怎么做?
本文討論的主題是如何防緩存, 尤其是如何防止靜態文件被緩存..
在 RE:對博客園URL的一些調整建議, 二級域名不利于客戶端瀏覽器緩存 一文中,我提到了怎么最大化的
利用瀏覽器緩存功能,來提高客戶端瀏覽速度, 減輕服務器負擔的.
但是事物總是一分為二的,并不是所有的場合都要使用緩存的. 有時候我們的數據被緩存了反而會給我們帶來麻煩.
對于動態數據(從數據庫讀取生成的那些),我們可以通過以下方法來禁止瀏覽器緩存。
'asp 為例 禁止緩存
Response.Buffer = True
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = "no-cache"
Response.AddHeader "Pragma", "No-Cache"
對于Ajax 的請求(不管是靜態數據還是動態數據):
//以下三種方法使用其中任何一種方法都可以
xmlhttp.setRequestHeader("Cache-Control","no-cache");
//或者
xmlhttp.setRequestHeader("If-Modified-Since","0");
//或者
xmlhttp.Open(url+'?rnd='+Math.random(),....)
如果使用 prototype.js , 用類似這樣的代碼
new Ajax.Request(url,{method:"get",requestHeaders:["Cache-Control","no-cache"]})
或者
new Ajax.Request(url,{method:"get",requestHeaders:["If-Modified-Since","0"]})
什么情況下,要禁止靜態文件緩存:
1、經常可能要改動的 js, css.
比如 一個html 文件, test.html 在 1.0版本中。可能是這樣
<script src="common.js"></script>
修改后 v1.1版本:
<script src="common.js"></script>
<script src="foo.js"></script>
新增加了一個foo.js 同時,也改動了common.js , 在common.js 中定義了新的類,并在foo.js 中使用了common.js.
在這種情況下如果以前用戶瀏覽過 1.0版本的 html 文件,那么他的瀏覽器自動緩存了 common.js
當他瀏覽新版本的時候,因為使用的是 v1.1的 foo.js 和 v1.0的 common.js ,這樣將導致腳本出錯。
解決方法探討:
因為css,js 是通過 <script src=....> 這種方式加載的,所以,很難使用 asp 的那種服務器端禁止緩存的辦法。也很難使用ajax的通過設置 http請求頭的辦法禁止使用緩存。
看來隨機數是個好辦法。
//方法一:
document.write("<script src='test.js?rnd="+Math.random()+"'></s"+"cript>")
//方法二:
var js=document.createElement("script")
js.src="test.js"+Math.random()
document.body.appendChild(js)
但是,如果采用隨機數的話, js文件將永遠得不到緩存,每次都必須重新從服務器加載,即使沒有任何更改。
大家如果經常上國外網站的話,可以看到他們通常采用這樣的方式來解決:
<script src="test.js?ver=113"></script>
其中 ver=113 的 113就是版本號,一般都是采用 CVS 或其他工具生成的開發版本號。
這樣真正做到了應該緩存的時候緩存靜態文件,當版本有更新的時候從獲取最新的版本,并更新緩存。
對于圖像 <img src="test.jps?ver=在CVS的版本號"> 來有效利用和更新緩存.
唉,現在在CSDN的Web版,不知道有多少人在重復問著同一個問題。“怎么通過程序刪除清空客戶端的瀏覽器緩存”.........
未完待續:
下一篇: 利用瀏覽器緩存來改善用戶體驗。。。。Ajax模式之預先加載
敬請關注,等我寫完再加上鏈接