不過這樣的機制也帶來的代價，如果你的檔案更新時，在瀏覽器的快取仍未更新，將導致一些異常(比如CSS的圖片未更新或是Javascript的邏輯錯誤)。
我們可以用一些簡單的方法來避免這樣的情況。如:
1.更改javascript 或css的檔名(就像jQuery將版本號加入他的檔名一樣)
2.在import外部檔案時，加入一些像是QueryString的參數。
用一個簡單的範例重現這個問題:
首先，我們寫一個簡單的javascript檔，命名為「js_cached.js」
js_cached.js
function fun() {
return "A";
}
再來，建立一支網頁來import這隻js檔。default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="default.aspx.cs" Inherits="cache_default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js_cached.js" type="text/javascript"></script>
<script type="text/javascript">
var cacheFile = fun();
</script>
<script type="text/javascript" src='<%=Tool.GetFileRefUrl("js_cached.js")%>' ></script>
<script type="text/javascript">
var lastFile = fun();
</script>
</head>
<body>
<form>
<div>
The cache file is :<script type="text/javascript">
document.writeln(cacheFile);
</script>
<br />
The last file is :<script type="text/javascript">
document.writeln(lastFile);
</script>
</div>
</form>
</body>
</html>
上面這個網頁，會透過兩種方式載入「js_cached.js」，一個是普通的import，另外一個則是動態的產生，並帶入參數。
送到client(也就是瀏覽器啦)的網頁html大概會長這樣。
<script src="js_cached.js" type="text/javascript"></script>
<script type="text/javascript">
var cacheFile = fun();
</script>
<script type="text/javascript" src="js_cached.js?v=634933730146375000"></script>
<script type="text/javascript">
var lastFile = fun();
</script>
結果畫面如下:
接下來 ，我們要讓cache這件事發生，但在這之前先修改我們的js檔
function fun() {
return "B";
}
讓快取發生最簡單的方式為(測試用瀏覽器為chrome)1.保留原本頁面
2.開啟新的分頁
3.鍵入原本頁面的URL
我們就會看到以下的畫面
如此一來，就能看到未帶參數的變數cacheFile被cache住，仍然為A，
而有帶參數的lastFile 值為B，正是server端的最新版本。
這是一個有效的防止js檔被cache住的方法，同樣的也可以在css或其它檔案中應用。
要注意的是，cache本身的機制有其用意在，在應用此方法時，應因時因地制易才對，避免途增伺服器的負擔。
最後提供本例的Tool.GetFileRefUrl Function
public class Tool
{
public static string GetFileRefUrl(string url)
{
var ticks = GetLastWriteTime(url);
var result = string.Format("{0}?v={1}", url, ticks);
return result;
}
private static long GetLastWriteTime(string fileName)
{
var lastWriteTime = File.GetLastWriteTime(HttpContext.Current.Server.MapPath(fileName));
return lastWriteTime.Ticks;
}
}
參考文章:
