提高JS文件加载速度

1.开发过程中,经常发现JS加载文件出现过慢,导致页面文件很长时间打不开。 解决办法:换一个js包含的方式,让javascript加载速度倍增。
把通常加载方式:
<script src="xxxx.js"></script>
改变成:
<script type="text/javascript">
document.write("<scr"+"ipt src=\"xxx.js\"></sc"+"ript>") ;
</script>

2.使用jsbuild等工具把需要调用的js重新包装,此方法的缺点是Ext用的最多的是form和grid等控件,删减后包容量减少不明显,而且我是打包了几次失败,就没耐心了,当然,要做到最好调优,这个方案是要考虑的,基本方法就是页面调用核心的ext-core.js,然后再把页面要用的包自己包装。

3. 使用gzip在服务器端牺牲一点cpu资源进行压缩,有效减低传输流量,由浏览器解压处理后执行。这个解决方案另我眼前一亮,其实也不是什么新东西,2005年的老东西了,只是当时没有想到js会如此庞大,但现在老技术还是很实用的。下面将重点研究这个解决方案。

第一步,在web.xml增加一个gzipfilter,不用自己写,有现成的,到地址:http://sourceforge.net/projects/filterlib下载,新建一个测试项目,最简单就在index.jsp直接调用ext-all.js,把tk-filters.jar拷贝到项目的lib目录,然后在web.xml加入: [先用gzip压了,然后把header改一下这个方法不错,以下地址有例子:http://www.javaeye.com/topic/37176 <<关于JavaScript的gzip静态压缩方法 >> ]

Code

第二步,调试,调试js现在发现最好的工具应该是FireFox+firebug(插件),FireFox我用1.5版本,调试足够了,我使用Weblogic作调试服务器,tomcat也可以,但我的tomcat在server.xml直接配置gzip压缩功能,所以用weblogic免得测试不出来。启动项目后,用Firefox打开index.jsp页面,页面调出后可能会有脚本错误,但可以不管,关键看文件的大小,打开工具->firebug->open firebug,寻找net项,即可看到调用的ext-all.js的压缩效果,如附图的比较,效果不错吧,512K => 137K,如果发现js压缩没效果,注意打开工具->清除私隐数据,清掉可能存在的cache,再刷新页面重试。

     第三步,压力测试,我使用loadrunner7.8测试,简单实用,没有8.0以上版本的华丽和慢。使用1000个进程测试,发现了意外的结果(见附图),在本机测试,不用gzip压缩只用了36秒,而使用gzip压缩后则是1分49秒,流量在压缩后从1,315,914,600降到313,125,680,流量随着文件的压缩而减少,效果也很明显,查其原因,应该是因为压缩和解压对服务器和浏览器的资源消耗,而且是在本机测试,本机排除了带宽的影响,所以压缩前性能反而高了。

posted @ 2009-07-03 11:23  WenEric  阅读(1478)  评论(1编辑  收藏  举报