讓Web應用程式飛起來的祕訣

導讀：通過提高Web資源的效能，讓它們變得更小，使得網站的訪問者將可以更快地載入較小的原始檔，而且將可以節省網站所用的頻寬。本文介紹瞭如何通過對CSS和JavaScript檔案——兩種易於優化的常見資源，使用社群中提供的工具即可完成優化——優化空間使用來實現更高的效能。然而，在繼續之前，有一點是很重要的，壓縮CSS和JavaScript檔案只是為了讓Web應用程式“輕巧”的諸多操作其中的兩個技術。關於優化其他資源（比如，HTML和影象）的技術，可以從其他書籍或網路資源等參考資料中獲取更多資訊。本文內容由CSDN編輯節選並整理了IBM developerworks而來。

問題：空白內容

當開發人員使用CSS或JavaScript檔案工作時，空白內容通常是一件好事。空白內容包括縮排檔案所使用的字元，增強可讀性的間距、以及為了在文章的不同部分新增一個可視間隔而插入的額外空行。空白內容使檔案易於閱讀和維護。如果CSS檔案中有適當數量的空白內容（和註釋），將有助於開發人員理解CSS程式碼的意圖。

從這一點上來說，將檔案變得更小作為問題的一個長期解決方案是不可行的，因為檔案很有可能在將來會被修改。如果將空白內容和註冊全部刪除，CSS和 JavaScript程式碼就很難閱讀。

問題是逐漸增加的空白導致檔案不斷增大。每個空白行、縮排和括號之間的空格至少佔用一個額外字元，這對於CSS或JavaScript程式碼的正確解析來說實際上並不需要。首先，一兩個空白沒有什麼大不了的，但是小數量乘以一個很大倍數時就變成很大的數量了。

考慮這樣一個檔案，其中額外空白總計5KB。如果網站每天的點選率是1000，每天節省5KB每個月就可以節約大約146 MB（(5K * 1000 * 30) / 1024作為粗略估計）。就這而言，該檔案的點選量還是相對保守的估計，實際空白成本可能還會增加。

此外，下載檔案的使用者必須等待檔案的下載。儘管許多使用者在他們第一次訪問網站後可能就有快取的CSS或JavaScrip檔案，效能仍然會對他們的第一次訪問造成負面影響。如果可以減少CSS和JavaScript檔案，即使每次1KB，都可以減少數千位元組的瀏覽器必須載入的資料。

解決方案：壓縮

要解決問題並從小資源獲益，一個顯而易見的解決方案是從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）。在原文中，作者以程式碼例項詮釋瞭如何CSS和JavaScript檔案(您可以點選這裡檢視更多程式碼例項)。

通過YUI，以下優化將在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外掛。這兩個工具都展示了下載的附加資源以及檔案大小和下載它們瀏覽器所用的時間。

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

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

圖 2 展示了 Firefox 中的 Firebug 外掛分析同一頁面 。

圖 2. Firebug 外掛

如果使用一個自動工具，就可輕鬆地獲取一個使用舊檔案的URL和另一個包含壓縮檔案的URL（例如，http://localhost/orig 和 http://localhsot/minified）。開發者可以使用這些工具來對Web應用程式進行基本的分析，就會知道壓縮CSS和JavaScript檔案會有多大的不同。剛開始差異可能很小，但做一些數學運算，就能明白執行優化比起置之不理，長期效果是多麼的明顯。 

此外，作者還分析瞭如何使用自動化和整合工具去壓縮CSS和JavaScript程式碼(可點選此處檢視)。

結束語

YUI Compressor是一個可以用來優化CSS和JavaScript原始檔的工具，使它們變得更小。小的原檔案會帶來了許多好處，節省了頻寬、為訪問提供更快的載入時間。儘管對於一個檔案節約似乎微不足道，但是如果大量使用，累計起來相當可觀。如果新增到分段步驟中，YUI Compressor將可以在不影響檔案開發和維護的情況下優化CSS和JavaScript檔案。必須強調的是，壓縮CSS和JavaScript檔案只是優化資源，使Web應用程式更輕巧的整體工作中的兩個技術。