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

如何让你的WEB应用跑得更快http://cyfgod.iteye.com/blog/290550
关键字: css, 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" failοnerrοr="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/