禁止客户端js缓存的方法控讨

发布时间:2020-10-03编辑:脚本学堂
一直困惑于如何禁止客户端js缓存的方法,无意间发现这篇文章,分享一下,希望能帮助大家处理好js的客户端缓存。

减少客户端的请求数,一定程度上也可以提高网站的性能,或者说是用户访问体验。
如何减少请求数?这里提供个思路:
1,JS文件尽量少,
2,Image尽量少,
3,CSS等其他资源请求尽可能少。
减少图片,对于已运行的网站来讲,不太现实。

但可以合并JS文件和CSS文件,以达到个数减少的目的,
同时,可以开启客户端缓存,
按道理默认来说,JS,Image,CSS等,这些会自动在服务器被缓存,

服务器端的缓存方式:
1,客户端发送请求给服务器,询问是否缓存未过期
2,如果已过期,服务器发送这个资源给客户端
  如果未过期,服务器发送一个304的状态码,标志缓存有效,客户端从本地Load

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

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

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

解决方法:
修改该资源的URL即可。

如果直接修改URL,比如
 

..javascriptJS1.js  ー> ..JavaScriptJS1new.js
或者 —> ..JavaScriptnewJS1.js

这都是可行的,但是,维护起来很麻烦,将产生大量的新路径,或新的JS文件名。

以下是这一问题的解决方法:
 

复制代码 代码示例:
<% 
  String qBuildNum = '?' + ServerInfoService.getBuildNumber(); //Suffix for JS to avoid caching 
%> 
<script type="text/javascript" rc="dwr/util.js?113"></script> 
<script type="text/javascript" src="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="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的版本号"> 来有效利用和更新缓存。
这个倒是很多大站都在用,脚本学堂的朋友,值得关注下。