2在服務端合併和壓縮JavaScript和CSS文件
Web效能優化最佳實務中最重要的一條是減少HTTP請求,它也是YSlow中比重最大的一條規則。減少HTTP請求的方案主要有合併JavaScript和CSS檔案、CSS Sprites、影像映射(Image Map)和使用Data URI來編碼圖片。 CSS Sprites和圖片映射現在已經隨處可見了,但由於IE6和IE7不支援Data URI以及效能問題,這項技術尚未大量使用。目前大部分網頁中的JavaScript和CSS檔案數量和開發時一致,少量的網頁會根據實際情況採取本地合併,這些合併中相當多的是有選擇地手動完成,每次新的合併都需要重新在本地完成並上傳到伺服器,比較的隨意和繁瑣,同樣檔案的壓縮也有類似的情況。而利用服務端的合併和壓縮,我們就可以按照開發的邏輯盡可能讓文件的顆粒度變小,利用網頁中URL的規則來自動實現文件的合併和壓縮,這會相當的靈活和高效。
YUI Combo Handler
2008年7月YUI Team宣佈在YAHOO! CDN上對YUI JavaScript元件提供Combo Handler服務。 Combo Handler是Yahoo!開發的Apache模組,它實現了開發人員簡單方便地透過URL來合併JavaScript和CSS文件,從而大大減少文件請求數。例如在頁面上使用YUI2的Rich Text Editor元件需要引入多個JavaScript文件,常用方式如下:
而使用Combo Handler服務之後,則上述的程式碼可以寫成:
除了程式碼的可讀性稍微有一點點降低外,使用Combo Handler服務大大的降低了HTTP請求數,同時也減少了URL程式碼量,這對於Web效能最佳化來講至關重要。所以,隨後YUI從2.6.0開始,其核心元件YUI Loader內建了Combo Handling功能,也就是使用YUI Loader時,透過設定combine屬性就可以把要載入的多個JavaScript或CSS檔案依照使用Combo Handler服務的形式合併起來,此時只要靜態檔案的伺服器支援Combo Handler就行了。在YUI中當combine配置為true時,CDN預設是使用Yahoo! CDN( http://yui.yahooapis.com ),所以沒有任何問題。這正是YUI最迷人的地方之一。
遺憾的是http://yui.yahooapis.com在中國的速度並不佳,本來中國雅虎提供http://cn.yui.yahooapis.com/ ,但尚未提供Combo Handler服務,同時因種種原因,其更新在YUI 2.7.0之後就停滯了。更糟的是Yahoo!開發的支援Combo Handler的Apache模組雖然據傳有計劃開源,但至少現在依舊是私有技術,要使用就需要自己實現類似功能,所以國內類似技術的應用並不太多。