客户端禁止JS缓存的方法

如何提升Web应用程序性能,是我们经常要面对的一个问题,
其中服务器端方面的改善,这里先不道来。

对于客户端性能改善,
核心就是,减少请求数,
怎么样减少请求数,
1,JS文件尽量少,
2,Image尽量少,
3.CSS等其他资源请求尽可能少。
但是,对于已有的Web应用程序来说,我们无法做到减少图片,
但是我们能合并JS文件和CSS文件,以达到个数减少的目的,
同时,我们可以开启客户端缓存,
按道理默认来说,JS,Image,CSS等,这些会自动在服务器被缓存,
服务器端的缓存方式:
①客户端发送请求给服务器,询问是否缓存未过期
②如果已过期,服务器发送这个资源给客户端
  如果未过期,服务器发送一个304的状态码,标志缓存有效,客户端从本地Load

客户端缓存的方式:
客户端将首先判断客户端本地缓存是否有效,如果有效,将直接从地Load
从而不必发送请求给服务器确认。

从以上缓存的工作方式来看,
服务器端缓存并不能减少请求数,只是说能减少传输量。

所以,客户端缓存,在实际应用中,还是很有效的。
但是,客户端缓存带来的一个问题是,当我应用程序更新了某个文件,需要重新发布时,
那么因为缓存的存在,被更新的JS或者CSS文件将无法被重新Load,而失效。

解决的方法很简单,
我们修改该资源的URL即可。
但是这里有技巧可言。
如果直接修改URL,比如
..\JavaScript\JS1.js  ー> ..\JavaScript\JS1new.js
或者 —> ..\JavaScript\new\JS1.js
这都是可行的,但是,我们会发现实际维护起来很麻烦,他将产生大量的新路径,或者新的JS文件名。
以下是针对这一问题的合适的解决案。

[html] view plaincopy
<% 
  String qBuildNum = '?' + ServerInfoService.getBuildNumber(); //Suffix for JS to avoid caching 
%> 
<script type="text/javascript" rc="http://www.xuehai.net/dwr/util.js?113"></script
<script type="text/javascript" src="http://www.xuehai.net/script/controller.js<%=qBuildNum%>"></script
在URL后加上参数?BuilNum,这个是我们的版本号,我们可以很容易得到。

每次BuilNum,不同,那么它既达到了每次修改资源URL的目的,
同时也不影响我们资源本身的存放Path或者文件名。
我们可以很方便的维护。

<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="http://www.xuehai.net/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://www.cnblogs.com/alocne/archive/2012/03/11/2389731.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值