怎么避免浏览器缓存静态文件(js/css/img)

最新推荐文章于 2024-05-28 21:34:35 发布

必应珠峰

最新推荐文章于 2024-05-28 21:34:35 发布

阅读量2.8k

点赞数

分类专栏： JavaScript 文章标签：浏览器服务器 url cvs ajax asp

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

对于动态文件,比如 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版，不知道有多少人在重复问着同一个问题。“怎么通过程序删除清空客户端的浏览器缓存”