防止浏览器缓存css,js静态文件

什么情况下，要禁止静态文件缓存：

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的版本号"> 来有效利用和更新缓存.

原文：http://blog.csdn.net/zhangw428/article/details/6057748