Forsource: JavaScript與CSS Cache

我們在開發css或javscript，常常遇到一個問題;那就是瀏覽器的快取(Cache)，快取本身的好處是不需要重新自伺服器取得檔案，也就是說以伺服器的角度來說，只有新的訪客發出Request時，才需要送一份新的網頁所需的資源(包含圖檔、音樂、影像等…)，而拜訪過的訪客，瀏覽器會自動將這些資源檔存在快取中。如此一來，便可以減少伺服器的頻寬的消耗。

不過這樣的機制也帶來的代價，如果你的檔案更新時，在瀏覽器的快取仍未更新，將導致一些異常(比如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;
    }
}

參考文章:

Forsource

2013年1月16日星期三

JavaScript與CSS Cache

沒有留言:

張貼留言

2013年1月16日 星期三

JavaScript與CSS Cache

沒有留言:

張貼留言

2013年1月16日星期三