本文向您介紹如何通過在您的 CSS 和 JavaScript 文件中 — 兩種易于優(yōu)化的常見資源，使用社區(qū)中提供的工具即可完成優(yōu)化 — 優(yōu)化空間使用來實(shí)現(xiàn)更高的性能。然而，在繼續(xù)之前，有一點(diǎn)是很重要的，壓縮 CSS 和 JavaScript 文件只是為了讓您的 web 應(yīng)用程序 “輕巧” 的諸多操作其中的兩個(gè)技術(shù)。關(guān)于優(yōu)化其他資源（比如，HTML 和圖像）的 技術(shù)，參閱? 參考資料 ?獲取更多信息。

為了從本文中獲得最大收益，您需要安裝下列工具：

• 一個(gè)文本編輯器
• Java? Runtime Environment 1.4 或者更新版本（見? 參考資料 ）

問題：空白內(nèi)容

當(dāng)開發(fā)人員使用 CSS 或 JavaScript 文件工作時(shí)，空白內(nèi)容通常是一件好事。空白內(nèi)容包括縮進(jìn)文件所使用的字符，增強(qiáng)可讀性的間距、以及為了在文章的不同部分添加一個(gè)可視間隔而插入的額外空行。空白內(nèi)容使文件易于閱讀和維護(hù)。考慮? 清單 2 ?中的 CSS 文件，其中有適當(dāng)數(shù)量的空白內(nèi)容（和注釋），有助于開發(fā)人員理解 CSS 代碼的意圖。

從這一點(diǎn)上來說，將文件變得更小作為問題的一個(gè)長期解決方案是不可行的，因?yàn)槲募苡锌赡茉趯頃?huì)被修改。如果將空白內(nèi)容和注冊(cè)全部刪除，CSS 和 JavaScript 代碼就很難閱讀。

問題是逐漸增加的空白導(dǎo)致文件不斷增大。每個(gè)空白行、縮進(jìn)和括號(hào)之間的空格至少占用一個(gè)額外字符，這對(duì)于 CSS 或 JavaScript 代碼的正確解析來說實(shí)際上并不需要。首先，一兩個(gè)空白沒有什么大不了的，但是小數(shù)量乘以一個(gè)很大倍數(shù)時(shí)就變成很大的數(shù)量了。

考慮這樣一個(gè)文件，其中額外空白總計(jì) 5KB。如果您的網(wǎng)站每天的點(diǎn)擊率是 1000，每天節(jié)省 5KB 每個(gè)月就可以節(jié)約大約 146 MB（(5K * 1000 * 30) / 1024 作為粗略估計(jì)）。就這而言，該文件的點(diǎn)擊量還是相對(duì)保守的估計(jì)，實(shí)際空白成本可能還會(huì)增加。

此外，下載您文件的用戶必須等待文件的下載。盡管許多用戶在他們第一次訪問您的網(wǎng)站后可能就有緩存的 CSS 或 JavaScrip 文件，性能仍然會(huì)對(duì)他們的第一次訪問造成負(fù)面影響。如果您可以減少您 CSS 和 JavaScript 文件，即使每次 1 KB，您都可以減少數(shù)千字節(jié)的瀏覽器必須加載的數(shù)據(jù)。

回頁首

解決方案：壓縮

要解決問題并從小資源獲益，一個(gè)顯而易見的解決方案是從您的 CSS 和 JavaScript 文件刪除額外元素，比如注釋和空白。但是，由于在開發(fā)過程中從您的文件刪除注釋和空白不 可行，一個(gè)較好的解決方案是 “分級(jí)” 您的網(wǎng)站資源、優(yōu)化它們、然后將其發(fā)布。

編寫一個(gè)刪除空白字符的定制腳本最初聽起來是一個(gè)可行的解決方案，但是在 CSS 和 JavaScript 文件中本身都有很重要的空白。因此任何刪除空白和壓縮文件的工具必須是足夠智能，可以區(qū)別哪些語言中哪些空白是重要的。

幸運(yùn)的是，在社區(qū)中已經(jīng)可以找到這種工具了，它們已經(jīng)經(jīng)過資源（比如 CSS 和 JavaScrip 文件）壓縮測試了。其中一個(gè)工具就是 YUI Compressor，一個(gè)來自 Yahoo!? Developer Network 的可用工具（鏈接見? 參考資料 ）。

YUI Compressor

YUI 壓縮器是一個(gè)使用 Java 編寫的程序，擁有 Berkeley Software Distribution 許可證。YUI Compressor 可以縮小（壓縮）您的 CSS 和 JavaScript 代碼，這樣您無需自己編寫工具就可以享受小資源帶來的益處了。

下載 YUI Compressor，然后提取文件，放置到一個(gè)容易訪問的位置。歸檔文件包括完整源代碼和一個(gè)用于構(gòu)建 YUI Compressor 的 Apache Ant 腳本（build.xml）。然而，如果您不想構(gòu)建該文件，您可以在 build 目錄中找到 yuicompressor-{version}.jar（見? 圖 1 ）。

YUI Compressor 的 JAR 文件是自帶的，您可以將該文件復(fù)制到別的項(xiàng)目，通過輸入以下命令來執(zhí)行：

            java -jar yuicompressor-2.4.2.jar --help

          

除了下載該文件，還有一種方法，使用? 清單 1 ?中的 XML 文件來將 YUI Compressor 添加到您的 Apache Maven pom.xml 或 Apache IVY 文件。

            				
<dependency>
    <groupId>com.yahoo.platform.yui</groupId>
    <artifactId>yuicompressor</artifactId>
    <version>2.3.6</version>
</dependency>

          

將? -h ?傳遞參數(shù)到 yuicompressor.jar 文件，顯示 YUI Compressor 的基本用法信息。

回頁首

壓縮 CSS

清單 2 ?是一個(gè)為便于開發(fā)人員維護(hù)而優(yōu)化的 CSS 示例，它包含注釋，且被用空白格式化了。

            				
/* The main body for the page. */
body 
{ 
    font-family : Tahoma,Geneva,sans-serif;
    background-color : #e2e2e2;
    margin : 0 0 0 0;
    padding : 0 0 0 0;
}

/* The header and header elements */
#header, #content, #footer 
{
    padding 0;
    margin 0;
    width : 100%;
    min-width : 600px;
}

#header a 
{
    text-decoration : none;
    border : none;
}

#header 
{
    background : #fff url('images/lb-h.jpg') repeat-x top;
    height : 115px;
}

#header img.logo 
{
    position : absolute;
    border : none;
    margin-top : 10px;
    margin-left : 50px;
    z-index : 1000;
}

/* Top banner... */
#banner 
{
    margin : 0;
    padding : 0;
    background-color : #fff;
    border-bottom : 1px solid #bebebe;
    height : 265px;
    text-align : center;
}

/* This is the main content */
#content 
{
    background : #fff url('images/lb-g.jpg') repeat-x top;
    min-height : 450px;
    display : inline-block;
    clear : both;
}

#footer 
{
    border-top : 3px solid #bebebe;
    clear : both;
    min-height : 100px;
    font-size : smaller;
}

#followicons 
{
    margin-left : 50px;
}

          

要壓縮一個(gè) CSS 文件，運(yùn)行以下命令：

            java -jar yuicompressor-2.4.2.jar -o sample.min.css sample.css

          

文件被壓縮之后，輸出看起來如? 清單 3 ?所示。清單是為了便于閱讀進(jìn)行了格式化的，但是 YUI Compressor 輸出沒有換行：您看到的都是在一行。

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

          

除了簡單地刪除空白和注釋之外，YUI Compressor 還對(duì)您的 CSS 執(zhí)行大量其他優(yōu)化來使文件更小。那么，為了使文件更小究竟對(duì) CSS 代碼做了什么呢？

• 刪除空白。 任何不必要的空白，像縮進(jìn)、空行，以及元素和括號(hào)之間的空格都被刪除了。如果，CSS 的空白對(duì)于正常運(yùn)行是必需的，那么會(huì)被保留下來（見? 清單 4 ）。?
  
  清單 4. 刪除多余的空白
  

  /* Before */ #header a { text-decoration : none; border : none; } /* After */ #header a{text-decoration:none;border:none;}

  
  
• 刪除注釋。 如果在您的 CSS 文件中必須包含注釋，比如，公司的版權(quán)通告，您可以在注釋中輸入一個(gè)感嘆號(hào)（ ! ），通知 YUI Compressor 保留它（見? 清單 5 ）。?
  
  清單 5. 除必要注釋外，全部刪除
  

  /* Before */ /* This is the main content */ #content { background : #fff url('images/lb-g.jpg') repeat-x top; min-height : 450px; display : inline-block; clear : both; } /* After */ #content{background:#fff url('images/lb-g.jpg') repeat-x top;min-height:450px; display:inline-block;clear:both;}

  
  
• 刪除空聲明。 YUI Compressor 從 CSS 中刪除空聲明，除非它們對(duì)于正常運(yùn)行是必需的（見? 清單 6 ）。?
  
  清單 6. 刪除空聲明
  

  /* Before */ #followicons { margin-left : 50px; } #followicons a { } /* After */ #followicons{margin-left:50px;}

  
  
• 執(zhí)行其他優(yōu)化。 這些優(yōu)化包括減少十進(jìn)制數(shù)的前置零，縮短 0 值和 16 進(jìn)制值（見? 清單 7 ）。?
  
  清單 7. 執(zhí)行其他優(yōu)化
  

  /* Before */ body { font-family : Tahoma,Geneva,sans-serif; background-color : #ffee22; margin : 0 0 0 0; padding : 0 0 0 0; } /* After */ body{font-family:Tahoma,Geneva,sans-serif;background-color:#fe2;margin:0;padding:0;}

  
  

累積起來，YUI Compressor 對(duì) CSS 代碼進(jìn)行的這些優(yōu)化使您的文件小了不少呢！

回頁首

壓縮 JavaScript 代碼

您可以使用 YUI Compressor 來壓縮 JavaScript 代碼。 清單 8 ?顯示了一個(gè)包含注釋和額外格式的文件。

            				
/*
 * Creates a cookie on the system with the given name,
 * value, and for the given number of days.
 */
function createCookie(name, value, days) {

    if (days != null) 
    {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else 
    {
        var expires = "";
    }

    document.cookie = name + "=" + value + expires + "; path=/";

}

          

要在 JavaScript 文件上運(yùn)行 YUI Compressor，執(zhí)行以下命令：

            java -jar yuicompressor-2.4.2.jar -o functions.min.js functions.js

          

YUI Compressor 對(duì)文件進(jìn)行優(yōu)化之后，看起來像? 清單 9 ?這樣。

            				
function createCookie(c,d,e){if(e!=null){var b=new Date();b.setTime(b.getTime()+(e*24*60*
60*1000));var a="; expires="+b.toGMTString()}else{var a=""}document.cookie=c+"="+d+a+
"; path=/"};

          

YUI Compressor 添加到 Mozilla Rhino（見? 參考資料 ）項(xiàng)目，并使用項(xiàng)目中代碼標(biāo)記 JavaScript 文件。Rhino 是一個(gè)執(zhí)行 JavaScript 代碼的 Java 實(shí)現(xiàn)，被設(shè)計(jì)用于在 Java 應(yīng)用程序中提供擴(kuò)展點(diǎn)，通過啟動(dòng)這些擴(kuò)展點(diǎn)來執(zhí)行 JavaScript 代碼。

由于文件是使用支持 JavaScript 執(zhí)行的庫來進(jìn)行標(biāo)記的，那么它們將會(huì)被安全的編譯成 JavaScript 代碼，用與編寫方式相同的方法來執(zhí)行。其他搜索 — 替換工具用來縮小代碼，比如這些使用規(guī)則表達(dá)式的工具，如果所用的規(guī)則表達(dá)式不是足夠精細(xì)，那么將會(huì)出現(xiàn)誤差。

以下優(yōu)化是在 JavaScript 文件中執(zhí)行的：

• 刪除空白。 從 JavaScript 代碼中刪除所有不重要的空白，包括新行。
• 刪除注釋。 從 JavaScript 文件中刪除所有注釋，除了這些? C ?風(fēng)格的注釋，以? /*! ?序列開始的。如果公司版權(quán)或者其他信息必須保留在文件中，務(wù)必使用該序列包含您的注釋內(nèi)容。
• 重命名 Method-scoped 變量。 除非您使用 YUI Compressor 命令的? --nomunge ?選項(xiàng)，否則 YUI Compressor 將自動(dòng)縮短 JavaScript 文件中的變量名。（將變量聲明單獨(dú)留在函數(shù)外，假設(shè)它們可能會(huì)用于其他地方）。由于 JavaScript 語言中的變量名僅需至少一個(gè)字符 ，就能為您的 JavaScript 文件節(jié)省相當(dāng)多字符。替換變量稍微混淆 JavaScript 代碼，但是由于您不需要修改代碼版本，應(yīng)該問題不大。
• 刪除分號(hào)。 像壓縮 CSS 一樣，一些不重要的分號(hào)（ ; ）將被從 JavaScript 代碼中刪除。
• 其他選擇。 --line-break ?選項(xiàng)對(duì)于分離文件可能是重要的，因此這一行不能太長。（優(yōu)化時(shí) YUI Compressor 會(huì)刪除換行符。）

回頁首

看看優(yōu)勢

要想查看壓縮的優(yōu)勢，您可以使用不同的工具，其中兩個(gè)是構(gòu)建在瀏覽器中，這使得使用它們比使用分析工具方便得多：Google? Chrome Web 瀏覽器的開發(fā)人員工具和 Mozilla? Firefox 的 Firebug 插件。這兩個(gè)工具都向您展示了下載的附加資源以及文件大小和下載它們?yōu)g覽器所用的時(shí)間。

圖 2 ?是一個(gè) Chrome 開發(fā)人員工具分析一個(gè)頁面的示例。（要訪問這些工具，在您的瀏覽器中單擊? Tools > Developer Tools 。）

圖 3 ?展示了 Firefox 中的 Firebug 插件分析同一頁面 。

如果您使用一個(gè)自動(dòng)工具（下一節(jié)將會(huì)介紹），您就可輕松地獲取一個(gè)使用舊文件的 URL 和另一個(gè)包含壓縮文件的 URL（例如， http://localhost/orig ?和? http://localhsot/minified ）。您可以使用這些工具來對(duì)您的 web 應(yīng)用程序進(jìn)行基本的分析，就會(huì)知道壓縮您的 CSS 和 JavaScript 文件會(huì)有多大的不同。剛開始差異可能很小，但做一些數(shù)學(xué)運(yùn)算，就能明白執(zhí)行優(yōu)化比起置之不理，長期效果是多么的明顯。

回頁首

自動(dòng)化和集成

要想自動(dòng)完成壓縮，將它作為一個(gè)步驟添加到文件分段和執(zhí)行測試之間。 清單 10 ?中的 Ant 文件證實(shí)了如何使用 Ant 自動(dòng)完成操作。

            				
<?xml version="1.0" encoding="utf-8" ?>
<project name="my-web-site" default="usage" basedir=".">

    <property name="source.dir" value="${basedir}/application" />
    <property name="staging.dir" value="${basedir}/staging" />

    <macrodef name="yuicompress">
        <attribute name="filename" />
        <sequential>
            <java jar="${basedir}/tools/yuicompressor-2.4.2.jar" fork="true">
                <arg value="${source.dir}/styles/@{filename}" />
                <arg value="--type" />
                <arg value="css" />
                <arg value="-o" />
                <arg value="${staging.dir}/styles/@{filename}" />
            </java>
        </sequential>
    </macrodef>

    <target name="prepare-deploy">
        <echo level="info" message="Preparing files for deployment..." />

        <!-- minify the CSS -->
        <yuicompress filename="main.css"/>
    </target>

    <!-- The rest of the build script... -->

</project>

          

您也可以使用一個(gè) shell 腳本，Windows PowerShell? 腳本，或者批處理文件來自動(dòng)完成這一操作。

一旦文件被正確分段，您就可以根據(jù)分段代碼運(yùn)行您的測試了，如果可以的話。如果您沒有通過單元測試驗(yàn)證您定義的 JavaScript 代碼，您就應(yīng)該考慮它。參閱? 參考資料 ?，獲取介紹 web 應(yīng)用程序 UI 測試的信息鏈接。

您也可將 YUI Compressor 和 IDE 整合，比如 Eclipse，這樣構(gòu)建行為可以自動(dòng)為您生成一個(gè)壓縮文件。直接集成 Eclipse 最大的缺點(diǎn)就是任何添加到 Eclipse 的單個(gè)構(gòu)建器只可以優(yōu)化一個(gè)文件，除非構(gòu)建器調(diào)用一個(gè)腳本（比如， 清單 10 ?中的 Ant 腳本）來壓縮多個(gè)文件。

要為您的項(xiàng)目將 YUI Compressor 添加到 Eclipse 中，在 Eclipse 中選擇項(xiàng)目，然后單擊? Project > Properties ?來向項(xiàng)目中添加一個(gè)新構(gòu)建器。從那里開始執(zhí)行以下步驟：

1. 從屬性列表中選擇? Builders ，然后單擊? New ?來添加一個(gè)新構(gòu)建器（見? 圖 4 ）。?
   
   圖 4. 將 YUI Compressor 作為一個(gè)構(gòu)建器添加到 Eclipse?
   ?
   
   
2. 選擇? Program ，然后單擊? OK （見 圖 5 ）。?
   
   圖 5. 添加一個(gè)構(gòu)建器運(yùn)行程序
   ?
   
   
3. 輸入? Compress ?作為發(fā)布配置的名稱。
4. 輸入您 Java 文件夾的路徑（例如，/usr/bin/java）。
5. 通過單擊? Variables ?和添加? ${project_loc} ，使用項(xiàng)目位置作為工作目錄。
6. 為命令添加參數(shù)，包括 yuicompressor-{version}.jar 文件名。在? 圖 6 ?所示的示例中，JAR 文件被包含在項(xiàng)目的工具目錄下。?
   
   圖 6. 添加工具參數(shù)
   ?
   
   
7. 單擊? Refresh ?選項(xiàng)卡，然后選擇? Refresh resources upon completion 。您只需要刷新包含源代碼的項(xiàng)目即可。

如果您構(gòu)建了一個(gè) Ant 腳本來執(zhí)行壓縮，那么您可以向您的項(xiàng)目中添加一個(gè)構(gòu)建器來以同樣的形式調(diào)用 Ant 腳本。參閱? 參考資料 ，獲取整合 Ant 構(gòu)建器和您的 Eclipse 環(huán)境的示例鏈接。

回頁首

結(jié)束語

YUI Compressor 是一個(gè)可以用來優(yōu)化您的 CSS 和 JavaScript 源文件的工具，使它們變得更小。小的原文件為您帶來了許多好處，節(jié)省了帶寬、為您的訪問提供更快的加載時(shí)間。盡管對(duì)于一個(gè)文件節(jié)約似乎微不足道，但是如果大量使用，累計(jì)起來相當(dāng)可觀。

如果添加到分段步驟中，YUI Compressor 將可以在不影響文件開發(fā)和維護(hù)的情況下優(yōu)化您的 CSS 和 JavaScript 文件。壓縮 CSS 和 JavaScript 文件只是優(yōu)化資源，使您的 web 應(yīng)用程序更輕巧的整體工作中的兩個(gè)技術(shù)。

讓您的 web 應(yīng)用程序飛起來