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

一个典型的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文件，就像傻瓜相机一样，非常方便。

[url]http://spritegen.website-performance.org/[/url]

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