提高页面相应速度之压缩优化js和css文件

Steve Souders在他的《High Performance Web Sites》一书中提出提高网页效率的14条准则,这些可以使用Yahoo! YSlow来进行一个比较形象的检测。

这里主要来说一下第一条准则:Make Fewer HTTP Requests,意思就是尽可能的减少HTTP请求。当时要达到这个目的有很多种方法,其中最重要的一点就是将CSS文件和Javascript文件分别进行压缩和合并,这样就在很大程度上减少了浏览器对服务器的HTTP请求此处,另外一旦被浏览器下载到本地可以对此进行缓存,从而提高了加载速度。

有关于这方面的工具最优秀且使用最为广泛的开源软件非YUI Compressor莫属了。但是YUICompressor只能使用命令行一个个对js或css文件进行压缩,现在我们就通过使用ant脚本来达到批量压缩合并多个文件的目的。

下面以压缩js文件为例进行说明。

首先做一个关于js文件编码规范的约定:所有的原始文件均为 .source.js,经过压缩处理后文件变为.js,将多个压缩后的文件合并后的文件名称为all-min.js。

接下来可以写下面的ant脚本:

  1. <property name="js.dir" value="${web.dir}/scripts" />
  2. <property name="js.release.name" value="all-min.js"/>
  3.  
  4. <delete>
  5.     <fileset dir="${js.dir}" includes="${js.release.name}"/>
  6. delete>
  7.        
  8. <apply executable="java" parallel="false" verbose="true" dest="${js.dir}">
  9.     <fileset dir="${js.dir}">
  10.         <include name="**/*.source.js"/>
  11.     fileset>
  12.         <arg line="-jar"/>
  13.         <arg path="${yuicompressor}"/>
  14.    
  15.     <arg line="--charset utf-8"/>
  16.     <srcfile/>
  17.     <arg line="-o"/>
  18.    
  19.     <mapper type="glob" from="*.source.js" to="*.js" />
  20.         <targetfile/>
  21. apply>
  22.  
  23. <concat destfile="${js.dir}/${js.release.name}" fixlastline="true">
  24.     <fileset dir="${js.dir}">
  25.         <include name="**/*.js"/>
  26.         <exclude name="${js.release.name}"/>
  27.             <exclude name="**/*.source.js"/>
  28.             <exclude name="i18n/*.js"/>
  29.         fileset>
  30. concat>
  31.        
  32. <delete>
  33.     <fileset dir="${js.dir}">
  34.         <include name="**/*.js"/>
  35.         <exclude name="${js.release.name}"/>
  36.             <exclude name="**/*.source.js"/>
  37.             <exclude name="i18n/*.js"/>
  38.         fileset>
  39. delete>

你可能感兴趣的:(XHTML+CSS)