最佳化網站設計（十）：最小化JAVASCRIPT和CSS

前言

網站設計的最佳化是一個很大的話題,有一些通用的原則,也有針對不同開發平台的一些建議。這方面的研究一直沒有停止過，我在不同的場合也分享過這樣的話題。

作為通用的原則，雅虎的工程師團隊曾經給出過35個最佳實務。這個列表請參考  Best Practices for Speeding Up Your Web Site  http://developer.yahoo.com/performance/rules.html ，同時，他們還發布了一個相應的測試載入器Yslow http://developer.yahoo.com/yslow/

我強烈推薦所有的網站開發人員都應該學習這些最佳實務，並結合自己的實際項目情況進行應用。 接下來的一段時間，我將結合ASP.NET這個開發平台，針對這些原則，通過一個系列文章的形式，做些講解和演繹，以協助大家更好地理解這些原則，並且更好地使用他們。

準備工作

為了跟隨我進行後續的學習，你需要準備如下的開發環境和工具

1. Google Chrome 或者firefox ，並且安裝 Yslow這個向外延展群組件.請注意，這個組件是雅虎提供的，但目前沒有針對IE的版本。
   1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
   2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
   3. 你應該對這些瀏覽器的開發人員工具有所瞭解，你可以通過按下F12鍵調出這個工具。
2. Visaul Studio 2010 SP1 或更高版本，推薦使用Visual Studio 2012
   1. http://www.microsoft.com/visualstudio/eng/downloads
3. 你需要對ASP.NET的開發基本流程和核心技術有相當的瞭解，本系列文章很難對基礎知識做普及。

本文要討論的話題

這一篇我和大家討論第十個原則：Minify JavaScript and CSS （最小化JAVASCRIPT和CSS)。

在開始之前，我閑扯幾句：不自覺地就寫到了第十篇了，這個系列我覺得是很有必要的，雖然雅虎的這些最佳實務，我在很多年前就看過，也基本上在按照這些原則進行實踐。但我觀察下來有不少朋友還對此不瞭解，或者說即便知道這些原則，但具體在應用的時候也遇到些困惑（這些原則之間本身也可能存在“矛盾”）。所以我覺得利用一些時間，結合自己的實踐經驗，為大家講解和演繹，文中提到了很多想法，更重要的是我會解釋為什麼這麼做，為什麼不那麼做等等，希望大家能知其然，也知其所以然。最後我還會提供相應的工具、實踐的例子。

言歸正傳，"最小化JAVASCRIPT和CSS“ 這條原則主要講的是，我們應該儘可能地減少這兩種檔案的體積，以便加快下載速度。

1. 去除不必要的格式符、空白符、注釋符。這個操作，其實可以理解為是一種格式化，雖然它操作的結果其實是去除掉原始檔案的那些格式。
2. 模糊（Obfuscation）處理JAVASCRIP指令碼原始碼。

要理解這個行為，我們可以來看兩個檔案

這可能是我們最常用的兩個指令檔了。其實他們是同一個指令檔，作為約定，帶有min字樣的指令檔我們通常稱為“壓縮過的版本”——需要注意的是，這與“最佳化網站設計（四）：對資源啟用壓縮”這篇文章中談到的壓縮不是同一個概念。從他們的體積上可以看出來，“壓縮”比可以高達 65%，這可以節省很多的網路流量，以及寶貴的下載時間。

那麼這種“壓縮”是如何做到的呢？我們通過查看兩個檔案就可瞭解

原始檔案，我們通常稱為“格式良好”的指令檔，裡麵包含了8756行，有著豐富的注釋，分行符號等，這種格式很易於閱讀和理解，他同時也可以為開發工具（例如Visual Studio)提供智能感知方面的支援。我們再來看“壓縮”過之後的檔案。

這個檔案只包含6行，如果將頂部的幾句注釋也去除掉，實際上只有3行代碼，並且我們可以看到這些代碼是被處理過的，因為那些方法名，參數名都被處理成了儘可能簡短的名稱。很顯然這樣的代碼不適合人類閱讀，但對於電腦，具體來說是瀏覽器的JAVASCRIPT執行引擎來說是沒有問題的。如果你有興趣瞭解這些名稱的映射關係，可以參考另外一個檔案（jquery-2.0.0.min.map)

 

看起來你理解了這樣做的好處，也大致知道怎麼做了吧。雖然如此，我們不可能人工去做這樣的事情，這個挑戰太高了。通常我們會藉助一些工具來實現，例如文章中提到的兩個工具

1. JSMin ： 這個工具的名氣較大，可以對JAVASCRIPT進行最小化處理。

1. YUI Compressor  ： 這個不僅僅可以對JAVASCRIPT進行壓縮，也可以對CSS進行壓縮。很遺憾，它是一個java工具，可能在使用上面會有些限制。但你可以通過另外一個地址使用線上的版本：http://refresh-sf.com/yui/ 

值得一提的是，在進行JAVASCRIPT的最小化處理（尤其是要進行模糊處理）之前，需要確保指令檔的文法合法性，並且強烈建議將該檔案複製一份作為備用，因為通常這些操作都是無法復原的。

為了檢查指令碼中的文法合法性，可以使用另外一個工具JSLint

這個工具有針對Visual Studio 的外掛程式，你可以通過擴充管理器進行安裝。

 

我最後要補充一下，除了對JAVASCRIPT和CSS做這種最小化之外，我們有時候可能也會對HTML標記文本做最小化處理（主要是格式化），此時可以使用下面這個工具：Absolute HTML Compressor