優化網站設計（十）：最小化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