如何提升Web应用程序性能---JS缓存

如何提升Web应用程序性能，是我们经常要面对的一个问题，
其中服务器端方面的改善，这里先不道来。
对于客户端性能改善，
核心就是，减少请求数，
怎么样减少请求数，
1，JS文件尽量少，
2，Image尽量少，
3.CSS等其他资源请求尽可能少。
但是，对于已有的Web应用程序来说，我们无法做到减少图片，
但是我们能合并JS文件和CSS文件，以达到个数减少的目的，
同时，我们可以开启客户端缓存，
按道理默认来说，JS，Image,CSS等，这些会自动在服务器被缓存，

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

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

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

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

解决的方法很简单，
我们修改该资源的URL即可，如改文件名。

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