老外支招:讓您的Web應(yīng)用程序飛起來
本文向您介紹如何通過在您的 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è)長(zhǎng)期解決方案是不可行的，因?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 文件)壓縮測(cè)試了。其中一個(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)。
圖 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 文件。
清單 1. 添加 YUI Compressor 到 Maven 或 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 示例，它包含注釋，且被用空白格式化了。
清單 2. 為維護(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 輸出沒有換行：您看到的都是在一行。
清單 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;}
除了簡(jiǎn)單地刪除空白和注釋之外，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)化使您的文件小了不少呢!
#p#
壓縮JavaScript 代碼
您可以使用 YUI Compressor 來壓縮 JavaScript 代碼。清單 8 顯示了一個(gè)包含注釋和額外格式的文件。
清單 8. 一個(gè)便于維護(hù)而格式化的 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 文件上運(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 這樣。
清單 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(見 參考資料)項(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í)行的庫(kù)來進(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ì)于分離文件可能是重要的，因此這一行不能太長(zhǎng)。(優(yōu)化時(shí) YUI Compressor 會(huì)刪除換行符。)
看看優(yōu)勢(shì)
要想查看壓縮的優(yōu)勢(shì)，您可以使用不同的工具，其中兩個(gè)是構(gòu)建在瀏覽器中，這使得使用它們比使用分析工具方便得多：Google® Chrome Web 瀏覽器的開發(fā)人員工具和 Mozilla® Firefox 的 Firebug 插件。這兩個(gè)工具都向您展示了下載的附加資源以及文件大小和下載它們?yōu)g覽器所用的時(shí)間。
圖 2 是一個(gè) Chrome 開發(fā)人員工具分析一個(gè)頁面的示例。(要訪問這些工具，在您的瀏覽器中單擊 Tools > Developer Tools。)
圖 2. Chrome 瀏覽器附帶的開發(fā)人員工具
圖 3 展示了 Firefox 中的 Firebug 插件分析同一頁面 。
圖 3. 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)化比起置之不理，長(zhǎng)期效果是多么的明顯。
自動(dòng)化和集成
要想自動(dòng)完成壓縮，將它作為一個(gè)步驟添加到文件分段和執(zhí)行測(cè)試之間。清單 10 中的 Ant 文件證實(shí)了如何使用 Ant 自動(dòng)完成操作。
清單 10. 使用 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)行您的測(cè)試了，如果可以的話。如果您沒有通過單元測(cè)試驗(yàn)證您定義的 JavaScript 代碼，您就應(yīng)該考慮它。參閱 參考資料 ，獲取介紹 web 應(yīng)用程序 UI 測(cè)試的信息鏈接。
您也可將 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í)行以下步驟：
從屬性列表中選擇 Builders，然后單擊 New 來添加一個(gè)新構(gòu)建器(見 圖 4)。
圖 4. 將 YUI Compressor 作為一個(gè)構(gòu)建器添加到 Eclipse
選擇 Program，然后單擊 OK(見 圖 5)。
圖 5. 添加一個(gè)構(gòu)建器運(yùn)行程序
輸入 Compress 作為發(fā)布配置的名稱。
輸入您 Java 文件夾的路徑(例如，/usr/bin/java)。
通過單擊 Variables 和添加 ${project_loc}，使用項(xiàng)目位置作為工作目錄。
為命令添加參數(shù)，包括 yuicompressor-{version}.jar 文件名。在 圖 6 所示的示例中，JAR 文件被包含在項(xiàng)目的工具目錄下。
圖 6. 添加工具參數(shù)
單擊 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ù)。
原文：http://www.ibm.com/developerworks/cn/web/wa-improve/
【編輯推薦】
