如何提升Web应用程序性能---JS缓存
如何提升Web应用程序性能,是我们经常要面对的一个问题,
其中服务器端方面的改善,这里先不道来。
对于客户端性能改善,
核心就是,减少请求数,
怎么样减少请求数,
1,JS文件尽量少,
2,Image尽量少,
3.CSS等其他资源请求尽可能少。
但是,对于已有的Web应用程序来说,我们无法做到减少图片,
但是我们能合并JS文件和CSS文件,以达到个数减少的目的,
同时,我们可以开启客户端缓存,
按道理默认来说,JS,Image,CSS等,这些会自动在服务器被缓存,
服务器端的缓存方式:
①客户端发送请求给服务器,询问是否缓存未过期
②如果已过期,服务器发送这个资源给客户端
? 如果未过期,服务器发送一个304的状态码,标志缓存有效,客户端从本地Load
客户端缓存的方式:
客户端将首先判断客户端本地缓存是否有效,如果有效,将直接从地Load
从而不必发送请求给服务器确认。
从以上缓存的工作方式来看,
服务器端缓存并不能减少请求数,只是说能减少传输量。
所以,客户端缓存,在实际应用中,还是很有效的。
但是,客户端缓存带来的一个问题是,当我应用程序更新了某个文件,需要重新发布时,
那么因为缓存的存在,被更新的JS或者CSS文件将无法被重新Load,而失效。
解决的方法很简单,
我们修改该资源的URL即可,如改文件名。
//方法一: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的版本号"> 来有效利用和更新缓存.