减少客户端的请求数,一定程度上也可以提高网站的性能,或者说是用户访问体验。
如何减少请求数?这里提供个思路:
1,JS文件尽量少,
2,Image尽量少,
3,CSS等其他资源请求尽可能少。
减少图片,对于已运行的网站来讲,不太现实。
但可以合并JS文件和CSS文件,以达到个数减少的目的,
同时,可以开启客户端缓存,
按道理默认来说,JS,Image,CSS等,这些会自动在服务器被缓存,
服务器端的缓存方式:
1,客户端发送请求给服务器,询问是否缓存未过期
2,如果已过期,服务器发送这个资源给客户端
如果未过期,服务器发送一个304的状态码,标志缓存有效,客户端从本地Load
客户端缓存的方式:
客户端将首先判断客户端本地缓存是否有效,如果有效,将直接从本地Load。不必发送请求给服务器确认。
从以上缓存的工作方式来看,
服务器端缓存并不能减少请求数,只是说能减少传输量。
所以,客户端缓存,在实际应用中,还是很有效的。
但是,客户端缓存带来的一个问题是,当我应用程序更新了某个文件,需要重新发布时,
那么因为缓存的存在,被更新的JS或者CSS文件将无法被重新Load,而失效。
解决方法:
修改该资源的URL即可。
如果直接修改URL,比如
这都是可行的,但是,维护起来很麻烦,将产生大量的新路径,或新的JS文件名。
以下是这一问题的解决方法:
在URL后加上参数?BuilNum,这个是版本号。
每次BuilNum,不同,那么它既达到了每次修改资源URL的目的,
同时也不影响资源本身的存放Path或者文件名。
新增加了一个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文件将永远得不到缓存,每次都必须重新从服务器加载,即使没有任何更改。
大家如果经常上国外网站的话,可以看到他们通常采用这样的方式来解决:
其中 ver=113 的 113就是版本号,一般都是采用 CVS 或其他工具生成的开发版本号。
这样真正做到了应该缓存的时候缓存静态文件,当版本有更新的时候从获取最新的版本,并更新缓存。
对于图像 <img src="test.jps?ver=在CVS的版本号"> 来有效利用和更新缓存。
这个倒是很多大站都在用,脚本学堂的朋友,值得关注下。