如何让你的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" 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/
页:
[1]