让你的 Web 应用程序飞起来

 　　本文向您介绍如何通过在您的 CSS 和 JavaScript 文件中 — 两种易于优化的常见资源，使用社区中提供的工具即可完成优化 — 优化空间使用来实现更高的性能。然而，在继续之前，有一点是很重要的，压缩 CSS 和 JavaScript 文件只是为了让您的 web 应用程序 “轻巧” 的诸多操作其中的两个技术。关于优化其他资源(比如，HTML 和图像)的 技术，参阅 参考资料 获取更多信息。

　　为了从本文中获得最大收益，您需要安装下列工具：

　　一个文本编辑器

　　Java™ Runtime Environment 1.4 或者更新版本

　　问题：空白内容

　　当开发人员使用 CSS 或 JavaScript 文件工作时，空白内容通常是一件好事。空白内容包括缩进文件所使用的字符，增强可读性的间距、以及为了在文章的不同部分添加一个可视间隔而插入的额外空行。空白内容使文件易于阅读和维护。考虑 清单 2 中的 CSS 文件，其中有适当数量的空白内容(和注释)，有助于开发人员理解 CSS 代码的意图。

　　从这一点上来说，将文件变得更小作为问题的一个长期解决方案是不可行的，因为文件很有可能在将来会被修改。如果将空白内容和注册全部删除，CSS 和 JavaScript 代码就很难阅读。

　　问题是逐渐增加的空白导致文件不断增大。每个空白行、缩进和括号之间的空格至少占用一个额外字符，这对于 CSS 或 JavaScript 代码的正确解析来说实际上并不需要。首先，一两个空白没有什么大不了的，但是小数量乘以一个很大倍数时就变成很大的数量了。

　　考虑这样一个文件，其中额外空白总计 5KB。如果您的网站每天的点击率是 1000，每天节省 5KB 每个月就可以节约大约 146 MB((5K * 1000 * 30) / 1024 作为粗略估计)。就这而言，该文件的点击量还是相对保守的估计，实际空白成本可能还会增加。

　　此外，下载您文件的用户必须等待文件的下载。尽管许多用户在他们第一次访问您的网站后可能就有缓存的 CSS 或 JavaScrip 文件，性能仍然会对他们的第一次访问造成负面影响。如果您可以减少您 CSS 和 JavaScript 文件，即使每次 1 KB，您都可以减少数千字节的浏览器必须加载的数据。

　　解决方案：压缩

　　要解决问题并从小资源获益，一个显而易见的解决方案是从您的 CSS 和 JavaScript 文件删除额外元素，比如注释和空白。但是，由于在开发过程中从您的文件删除注释和空白不 可行，一个较好的解决方案是 “分级” 您的网站资源、优化它们、然后将其发布。

　　编写一个删除空白字符的定制脚本最初听起来是一个可行的解决方案，但是在 CSS 和 JavaScript 文件中本身都有很重要的空白。因此任何删除空白和压缩文件的工具必须是足够智能，可以区别哪些语言中哪些空白是重要的。

　　幸运的是，在社区中已经可以找到这种工具了，它们已经经过资源(比如 CSS 和 JavaScrip 文件)压缩测试了。其中一个工具就是 YUI Compressor，一个来自 Yahoo!® Developer Network 的可用工具(链接见 参考资料)。

　　YUI Compressor

　　YUI 压缩器是一个使用 Java 编写的程序，拥有 Berkeley Software Distribution 许可证。YUI Compressor 可以缩小(压缩)您的 CSS 和 JavaScript 代码，这样您无需自己编写工具就可以享受小资源带来的益处了。

　　下载 YUI Compressor，然后提取文件，放置到一个容易访问的位置。归档文件包括完整源代码和一个用于构建 YUI Compressor 的 Apache Ant 脚本(build.xml)。然而，如果您不想构建该文件，您可以在 build 目录中找到 yuicompressor-{version}.jar(见 图 1)。

　　图 1. 归档文件目录

　　

　　YUI Compressor 的 JAR 文件是自带的，您可以将该文件复制到别的项目，通过输入以下命令来执行：

<ol class="dp-xml"><li class="alt"><span><span>java -jar yuicompressor-2.4.2.jar --help </span></span></li></ol>

　　除了下载该文件，还有一种方法，使用 清单 1 中的 XML 文件来将 YUI Compressor 添加到您的 Apache Maven pom.xml 或 Apache IVY 文件。

　　清单 1. 添加 YUI Compressor 到 Maven 或 IVY

<ol class="dp-xml">
<li class="alt"><span><span class="tag"><span class="tag-name">dependency</span><span class="tag">></span><span> </span></span></span></li>
<li><span>    <span class="tag"><span class="tag-name">groupId</span><span class="tag">></span><span>com.yahoo.platform.yui</span><span class="tag"></span><span class="tag-name">groupId</span><span class="tag">></span><span> </span></span></span></li>
<li class="alt"><span>    <span class="tag"><span class="tag-name">artifactId</span><span class="tag">></span><span>yuicompressor</span><span class="tag"></span><span class="tag-name">artifactId</span><span class="tag">></span><span> </span></span></span></li>
<li><span>    <span class="tag"><span class="tag-name">version</span><span class="tag">></span><span>2.3.6</span><span class="tag"></span><span class="tag-name">version</span><span class="tag">></span><span> </span></span></span></li>
<li class="alt"><span><span class="tag"></span><span class="tag-name">dependency</span><span class="tag">></span><span> </span></span></li>
</ol>

　　将 -h 传递参数到 yuicompressor.jar 文件，显示 YUI Compressor 的基本用法信息。

　　压缩 CSS

　　清单 2 是一个为便于开发人员维护而优化的 CSS 示例，它包含注释，且被用空白格式化了。

　　清单 2. 为维护而优化的 CSS 文件

<ol class="dp-css">
<li class="alt"><span><span class="comment">/* The main body for the page. */</span><span> </span></span></li>
<li><span>body  </span></li>
<li class="alt"><span>{  </span></li>
<li><span>    font-family : <span class="value">Tahoma</span><span>,Geneva,</span><span class="value">sans-serif</span><span>; </span></span></li>
<li class="alt"><span>    background-color : <span class="value">#e2e2e2</span><span>; </span></span></li>
<li><span>    margin : <span class="value">0 0</span><span> </span><span class="value">0 0</span><span>; </span></span></li>
<li class="alt"><span>    padding : <span class="value">0 0</span><span> </span><span class="value">0 0</span><span>; </span></span></li>
<li><span>} </span></li>
<li class="alt"><span> </span></li>
<li><span><span class="comment">/* The header and header elements */</span><span> </span></span></li>
<li class="alt"><span><span class="value">#header</span><span>, </span><span class="value">#conten</span><span>t, </span><span class="value">#footer</span><span>  </span></span></li>
<li><span>{ </span></li>
<li class="alt"><span>    padding <span class="value">0</span><span>; </span></span></li>
<li><span>    margin <span class="value">0</span><span>; </span></span></li>
<li class="alt"><span>    width : <span class="value">100%</span><span>; </span></span></li>
<li><span>    min-width : <span class="value">600px</span><span>; </span></span></li>
<li class="alt"><span>} </span></li>
<li><span> </span></li>
<li class="alt"><span><span class="value">#header</span><span> a  </span></span></li>
<li><span>{ </span></li>
<li class="alt"><span>    text-decoration : <span class="value">none</span><span>; </span></span></li>
<li><span>    border : <span class="value">none</span><span>; </span></span></li>
<li class="alt"><span>} </span></li>
<li><span> </span></li>
<li class="alt"><span><span class="value">#header</span><span>  </span></span></li>
<li><span>{ </span></li>
<li class="alt"><span>    background : <span class="value">#fff</span><span> </span><span class="value">url</span><span>(</span><span class="string">"images/lb-h.jpg"</span><span>) </span><span class="value">repeat-x</span><span> </span><span class="value">top</span><span>; </span></span></li>
<li><span>    height : <span class="value">115px</span><span>; </span></span></li>
<li class="alt"><span>} </span></li>
<li><span> </span></li>
<li class="alt"><span><span class="value">#header</span><span> img.logo  </span></span></li>
<li><span>{ </span></li>
<li class="alt"><span>    position : <span class="value">absolute</span><span>; </span></span></li>
<li><span>    border : <span class="value">none</span><span>; </span></span></li>
<li class="alt"><span>    margin-<span class="value">top</span><span> : </span><span class="value">10px</span><span>; </span></span></li>
<li><span>    margin-<span class="value">left</span><span> : </span><span class="value">50px</span><span>; </span></span></li>
<li class="alt"><span>    z-index : <span class="value">1000</span><span>; </span></span></li>
<li><span>} </span></li>
<li class="alt"><span> </span></li>
<li><span><span class="comment">/* Top banner... */</span><span> </span></span></li>
<li class="alt"><span><span class="value">#banner</span><span>  </span></span></li>
<li><span>{ </span></li>
<li class="alt"><span>    margin : <span class="value">0</span><span>; </span></span></li>
<li><span>    padding : <span class="value">0</span><span>; </span></span></li>
<li class="alt"><span>    background-color : <span class="value">#fff</span><span>; </span></span></li>
<li><span>    border-<span class="value">bottom</span><span> : </span><span class="value">1px</span><span> </span><span class="value">solid</span><span> </span><span class="value">#bebebe</span><span>; </span></span></li>
<li class="alt"><span>    height : <span class="value">265px</span><span>; </span></span></li>
<li><span>    text-align : <span class="value">center</span><span>; </span></span></li>
<li class="alt"><span>} </span></li>
<li><span> </span></li>
<li class="alt"><span><span class="comment">/* This is the main content */</span><span> </span></span></li>
<li><span><span class="value">#conten</span><span>t  </span></span></li>
<li class="alt"><span>{ </span></li>
<li><span>    background : <span class="value">#fff</span><span> </span><span class="value">url</span><span>(</span><span class="string">"images/lb-g.jpg"</span><span>) </span><span class="value">repeat-x</span><span> </span><span class="value">top</span><span>; </span></span></li>
<li class="alt"><span>    min-height : <span class="value">450px</span><span>; </span></span></li>
<li><span>    display : inline-<span class="value">block</span><span>; </span></span></li>
<li class="alt"><span>    clear : <span class="value">both</span><span>; </span></span></li>
<li><span>} </span></li>
<li class="alt"><span> </span></li>
<li><span><span class="value">#footer</span><span>  </span></span></li>
<li class="alt"><span>{ </span></li>
<li><span>    border-<span class="value">top</span><span> : </span><span class="value">3px</span><span> </span><span class="value">solid</span><span> </span><span class="value">#bebebe</span><span>; </span></span></li>
<li class="alt"><span>    clear : <span class="value">both</span><span>; </span></span></li>
<li><span>    min-height : <span class="value">100px</span><span>; </span></span></li>
<li class="alt"><span>    font-size : <span class="value">smaller</span><span>; </span></span></li>
<li><span>} </span></li>
<li class="alt"><span> </span></li>
<li><span><span class="value">#follow</span><span>icons  </span></span></li>
<li class="alt"><span>{ </span></li>
<li><span>    margin-<span class="value">left</span><span> : </span><span class="value">50px</span><span>; </span></span></li>
<li class="alt"><span>} </span></li>
</ol>

　　要压缩一个 CSS 文件，运行以下命令：

<ol class="dp-xml"><li class="alt"><span><span>java -jar yuicompressor-2.4.2.jar -o sample.min.css sample.css </span></span></li></ol>

　　文件被压缩之后，输出看起来如 清单 3 所示。清单是为了便于阅读进行了格式化的，但是 YUI Compressor 输出没有换行：您看到的都是在一行。

　　清单 3. 压缩后的 CSS 文件

<ol class="dp-xml">
<li class="alt"><span><span>body{font-family:Tahoma,Geneva,sans-serif;background-color:#e2e2e2;margin:0;padding:0;} </span></span></li>
<li><span>#header,#content,#footer{padding 0;margin 0;width:100%;min-width:600px;}#header a{ </span></li>
<li class="alt"><span>text-decoration:none;border:none;}#header{background:#fff url("images/lb-h.jpg") repeat-x  </span></li>
<li><span>top;height:115px;}#header img.logo{position:absolute;border:none;margin-top:10px; </span></li>
<li class="alt"><span>margin-left:50px;z-index:1000;}#banner{margin:0;padding:0;background-color:#fff; </span></li>
<li><span>border-bottom:1px solid #bebebe;height:265px;text-align:center;}#content{background:#fff  </span></li>
<li class="alt"><span>url("images/lb-g.jpg") repeat-x top;min-height:450px;display:inline-block;clear:both;} </span></li>
<li><span>#footer{border-top:3px solid #bebebe;clear:both;min-height:100px;font-size:smaller;} </span></li>
<li class="alt"><span>#followicons{margin-left:50px;} </span></li>
</ol>

　　除了简单地删除空白和注释之外，YUI Compressor 还对您的 CSS 执行大量其他优化来使文件更小。那么，为了使文件更小究竟对 CSS 代码做了什么呢?

　　删除空白。任何不必要的空白，像缩进、空行，以及元素和括号之间的空格都被删除了。如果，CSS 的空白对于正常运行是必需的，那么会被保留下来(见 清单 4)。

　　清单 4. 删除多余的空白

<ol class="dp-css">
<li class="alt"><span><span>                        </span><span class="comment">/* Before */</span><span> </span></span></li>
<li><span><span class="value">#header</span><span> a  </span></span></li>
<li class="alt"><span>{ </span></li>
<li><span>    text-decoration : <span class="value">none</span><span>; </span></span></li>
<li class="alt"><span>    border : <span class="value">none</span><span>; </span></span></li>
<li><span>} </span></li>
<li class="alt"><span> </span></li>
<li><span><span class="comment">/* After */</span><span> </span></span></li>
<li class="alt"><span><span class="value">#header</span><span> a{</span><span class="keyword">text-decoration</span><span>:</span><span class="value">none</span><span>;</span><span class="keyword">border</span><span>:</span><span class="value">none</span><span>;} </span></span></li>
</ol>

　　删除注释。如果在您的 CSS 文件中必须包含注释，比如，公司的版权通告，您可以在注释中输入一个感叹号(!)，通知 YUI Compressor 保留它(见 清单 5)。

　　清单 5. 除必要注释外，全部删除

<ol class="dp-css">
<li class="alt"><span><span>                        </span><span class="comment">/* Before */</span><span> </span></span></li>
<li><span><span class="comment">/* This is the main content */</span><span> </span></span></li>
<li class="alt"><span><span class="value">#conten</span><span>t  </span></span></li>
<li><span>{ </span></li>
<li class="alt"><span>    background : <span class="value">#fff</span><span> </span><span class="value">url</span><span>(</span><span class="string">"images/lb-g.jpg"</span><span>) </span><span class="value">repeat-x</span><span> </span><span class="value">top</span><span>; </span></span></li>
<li><span>    min-height : <span class="value">450px</span><span>; </span></span></li>
<li class="alt"><span>    display : inline-<span class="value">block</span><span>; </span></span></li>
<li><span>    clear : <span class="value">both</span><span>; </span></span></li>
<li class="alt"><span>} </span></li>
<li><span> </span></li>
<li class="alt"><span><span class="comment">/* After */</span><span> </span></span></li>
<li><span><span class="value">#conten</span><span>t{</span><span class="keyword">background</span><span>:</span><span class="value">#fff</span><span> </span><span class="value">url</span><span>(</span><span class="string">"images/lb-g.jpg"</span><span>) </span><span class="value">repeat-x</span><span> </span><span class="value">top</span><span>;</span><span class="keyword">min-height</span><span>:</span><span class="value">450px</span><span>; </span></span></li>
<li class="alt"><span><span class="keyword">display</span><span>:inline-</span><span class="value">block</span><span>;</span><span class="keyword">clear</span><span>:</span><span class="value">both</span><span>;} </span></span></li>
</ol>