如何让你的WEB应用跑得更快

cyfgod

一个典型的WEB应用程序可以包含很多文件内容，就以一个J2EE应用来说，一般会有class，有jar，还有一堆jsp/js/css/xml等等文件。特别是随着程序的庞大，这些文件也是成倍的增长。哪如何使你的WEB应用跑得更快呢？

后台的代码优化和应用逻辑很紧密，在此就不做说明，这里只是提出一些常用的对前端代码的优化方法。一般是JS和CSS，还有image图像文件。

1) 对JS文件，需要进行打包和压缩处理。可以将散乱的所有JS文件，都打包成一个JS文件，而且对一些变量和格式进行压缩，从而减少浏览器下截的时间。
可以采用YUI的compressor包，编写ant脚本进行处理。示例如下：
<project name="JSCompress" basedir="." default="compress.all"><property name="lib" value="WEB-INF/lib" /><property name="jspath" value="js" /><property name="yui-compressor.jar" location="${lib}/yuicompressor-2.3.4.jar" /><target name="compress.all"><concat destfile="${jspath}/allInOne.js"><filelist dir="."><file name="${jspath}/prototype.js"></file><file name="${jspath}/a.js"></file><file name="${jspath}/b.js"></file></filelist></concat><java jar="${yui-compressor.jar}" fork="true" failonerror="true" logError="true"><arg value="--nomunge" /><arg value="--disable-optimizations" /><arg value="-o" /><arg value="${jspath}/allInOne.js" /><arg value="${jspath}/allInOneMerged.js" /></java></target></project>

这个示例很简单，大家可以自已去试一下，调整一些参数。

2) 对CSS文件，也可以打包到一个CSS文件中，可以参考上面脚本中的concat操作。

3) 对image文件，特别是一些常用到的小icon图标，如果每个图标都单独下载，哪是很浪费时间的，这里就需要用到CSS sprite技术。将所有图标都合成到一个大的图片中，通过CSS控制显示所需要的小图标。
相关的CSS示例如下：

#container li {background: url(../images/toolbar/toolbar.gif) no-repeat top left;}.toorbarImageButton{background: url(../images/toolbar/toolbar.gif);background-color : transparent; background-repeat: no-repeat; border-style: none;width: 16px; height: 16px;}/* CSS Rules */.sprite-new { background-position: 0 -20px; } .sprite-save { background-position: 0 -56px; } .sprite-open { background-position: 0 -92px; } .sprite-Delete { background-position: 0 -164px; }

这里有一个很好的网站，大家可以用它直接生成相关的大图片和CSS文件，就像傻瓜相机一样，非常方便。
http://spritegen.website-performance.org/

好了，就说这些吧。有什么别的想法，可以一起讨论。