Java堂 » css http://www.javatang.com Java Tang Tue, 07 Sep 2010 03:26:23 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 提高页面相应速度之压缩优化js和css文件 http://www.javatang.com/archives/2008/04/13/0212267.html http://www.javatang.com/archives/2008/04/13/0212267.html#comments Sun, 13 Apr 2008 17:02:12 +0000 Jet http://www.javatang.com/archives/2008/04/13/0212267.html 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. <!-- 对YUICompressor的引用 -->
  2. <property name="js.dir" value="${web.dir}/scripts" />
  3. <property name="js.release.name" value="all-min.js"/>
  4.  
  5. <!-- 删除之前压缩合并过的文件 -->
  6. <delete>
  7.     <fileset dir="${js.dir}" includes="${js.release.name}"/>
  8. </delete>
  9.        
  10. <!-- 执行 yuicompressor 压缩JS
  11.    -- parallel="false"：对fileset中的每个文件都执行一次executable参数的命令
  12.   -- dest 执行目录
  13.    -->
  14. <apply executable="java" parallel="false" verbose="true" dest="${js.dir}">
  15.     <fileset dir="${js.dir}">
  16.         <include name="**/*.source.js"/>
  17.     </fileset>
  18.         <arg line="-jar"/>
  19.         <arg path="${yuicompressor}"/>
  20.     <!-- 设置待处理源文件及处理后输出文件的编码格式 -->
  21.     <arg line="--charset utf-8"/>
  22.     <srcfile/>
  23.     <arg line="-o"/>
  24.     <!-- 指定文件命名规则 -->
  25.     <mapper type="glob" from="*.source.js" to="*.js" />
  26.         <targetfile/>
  27. </apply>
  28.  
  29. <!-- 合并文件 -->
  30. <concat destfile="${js.dir}/${js.release.name}" fixlastline="true">
  31.     <fileset dir="${js.dir}">
  32.         <include name="**/*.js"/>
  33.         <exclude name="${js.release.name}"/>
  34.             <exclude name="**/*.source.js"/>
  35.             <exclude name="i18n/*.js"/>
  36.         </fileset>
  37. </concat>
  38.        
  39. <!-- 删除生成的临时文件 -->
  40. <delete>
  41.     <fileset dir="${js.dir}">
  42.         <include name="**/*.js"/>
  43.         <exclude name="${js.release.name}"/>
  44.             <exclude name="**/*.source.js"/>
  45.             <exclude name="i18n/*.js"/>
  46.         </fileset>
  47. </delete>

参考资料：
Building Web Applications With Apache Ant
YUI Compression tool as Ant Task
用yuicompressor和Ant压缩Ext的CSS文件
用YSlow分析我们页面（完整版）

]]> http://www.javatang.com/archives/2008/04/13/0212267.html/feed 1 收集到的用js和css实现的菜单 http://www.javatang.com/archives/2006/09/05/433463.html http://www.javatang.com/archives/2006/09/05/433463.html#comments Tue, 05 Sep 2006 02:43:34 +0000 Jet 一个是下拉菜单，演示：http://www.spacesu.com/cssmenu.html

一个是左右弹出菜单，演示：http://www.alistapart.com/d/horizdropdowns/horizontal2.htm

这两个我打了个包，方便各位下载：menu.js.css.rar

]]> http://www.javatang.com/archives/2006/09/05/433463.html/feed 0