老外支招:讓您的Web應用程序飛起來

作者：Nathan A. Good, 2011-09-27 13:25:05

本文向您介紹如何通過在您的 CSS 和 JavaScript 文件中 — 兩種易于優化的常見資源，使用社區中提供的工具即可完成優化 — 優化空間使用來實現更高的性能。

本文向您介紹如何通過在您的 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. 歸檔文件目錄

歸檔文件目錄，顯示構建用的文件夾、doc、lib 和 src。yuicompressor.jar 在 build 目錄下。

YUI Compressor 的 JAR 文件是自帶的，您可以將該文件復制到別的項目，通過輸入以下命令來執行：

java -jar yuicompressor-2.4.2.jar --help

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

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

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

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

壓縮 CSS

清單 2 是一個為便于開發人員維護而優化的 CSS 示例，它包含注釋，且被用空白格式化了。

清單 2. 為維護而優化的 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;  
}

要壓縮一個 CSS 文件，運行以下命令：

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

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

清單 3. 壓縮后的 CSS 文件

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 還對您的 CSS 執行大量其他優化來使文件更小。那么，為了使文件更小究竟對 CSS 代碼做了什么呢?

◆ 刪除空白。任何不必要的空白，像縮進、空行，以及元素和括號之間的空格都被刪除了。如果，CSS 的空白對于正常運行是必需的，那么會被保留下來(見清單 4)。

清單 4. 刪除多余的空白

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

◆ 刪除注釋。如果在您的 CSS 文件中必須包含注釋，比如，公司的版權通告，您可以在注釋中輸入一個感嘆號(!)，通知 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 中刪除空聲明，除非它們對于正常運行是必需的(見清單 6)。

清單 6. 刪除空聲明

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

◆ 執行其他優化。這些優化包括減少十進制數的前置零，縮短 0 值和 16 進制值(見清單 7)。

清單 7. 執行其他優化

/* 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 對 CSS 代碼進行的這些優化使您的文件小了不少呢!

#p#

壓縮JavaScript 代碼

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

清單 8. 一個便于維護而格式化的 JavaScript 文件

/*  
 * 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 文件上運行 YUI Compressor，執行以下命令：

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

YUI Compressor 對文件進行優化之后，看起來像清單 9 這樣。

清單 9. 壓縮的 JavaScript 文件

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(見參考資料)項目，并使用項目中代碼標記 JavaScript 文件。Rhino 是一個執行 JavaScript 代碼的 Java 實現，被設計用于在 Java 應用程序中提供擴展點，通過啟動這些擴展點來執行 JavaScript 代碼。

由于文件是使用支持 JavaScript 執行的庫來進行標記的，那么它們將會被安全的編譯成 JavaScript 代碼，用與編寫方式相同的方法來執行。其他搜索 — 替換工具用來縮小代碼，比如這些使用規則表達式的工具，如果所用的規則表達式不是足夠精細，那么將會出現誤差。

以下優化是在 JavaScript 文件中執行的：

◆ 刪除空白。從 JavaScript 代碼中刪除所有不重要的空白，包括新行。

◆ 刪除注釋。從 JavaScript 文件中刪除所有注釋，除了這些 C 風格的注釋，以 /*! 序列開始的。如果公司版權或者其他信息必須保留在文件中，務必使用該序列包含您的注釋內容。

◆ 重命名 Method-scoped 變量。除非您使用 YUI Compressor 命令的 --nomunge 選項，否則 YUI Compressor 將自動縮短 JavaScript 文件中的變量名。(將變量聲明單獨留在函數外，假設它們可能會用于其他地方)。由于 JavaScript 語言中的變量名僅需至少一個字符，就能為您的 JavaScript 文件節省相當多字符。替換變量稍微混淆 JavaScript 代碼，但是由于您不需要修改代碼版本，應該問題不大。

◆ 刪除分號。像壓縮 CSS 一樣，一些不重要的分號(;)將被從 JavaScript 代碼中刪除。

◆ 其他選擇。--line-break 選項對于分離文件可能是重要的，因此這一行不能太長。(優化時 YUI Compressor 會刪除換行符。)

看看優勢

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

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

圖 2. Chrome 瀏覽器附帶的開發人員工具

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

圖 3. Firebug 插件

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

自動化和集成

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

清單 10. 使用 Ant 自動壓縮

<?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>

您也可以使用一個 shell 腳本，Windows PowerShell™ 腳本，或者批處理文件來自動完成這一操作。

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

您也可將 YUI Compressor 和 IDE 整合，比如 Eclipse，這樣構建行為可以自動為您生成一個壓縮文件。直接集成 Eclipse ***的缺點就是任何添加到 Eclipse 的單個構建器只可以優化一個文件，除非構建器調用一個腳本(比如，清單 10 中的 Ant 腳本)來壓縮多個文件。

要為您的項目將 YUI Compressor 添加到 Eclipse 中，在 Eclipse 中選擇項目，然后單擊 Project > Properties 來向項目中添加一個新構建器。從那里開始執行以下步驟：

從屬性列表中選擇 Builders，然后單擊 New 來添加一個新構建器(見圖 4)。

圖 4. 將 YUI Compressor 作為一個構建器添加到 Eclipse