首頁 »
2009/11/05

增進Web 2.0網頁執行效能的三個有效招數-使用AJAX Minifier、Doloto與IIS壓縮

Ajax Minifier Doloto
2009年10月號的台灣微軟MSDN Flash,祭司撰文一篇【增進Web 2.0網頁執行效能的三個有效招數-使用AJAX Minifier、Doloto與IIS壓縮】,其中最主要精神是對JavaScript進行下載最佳化及檔案減肥,使得JavaScript傳送到Client端速度更快,啓始時間更為迅速,來達到增進Web 2.0網頁執行效能之目的。


對於Web 2.0網頁效能的改進,本篇並非要廣泛論述Web效能最佳化的種種技巧,例如設計良好的程式架構、有效利用快取、程式的重構或運用正確的Design Patterns手法,因為這些改造都涉及程式的改寫,對已上線的系統是一大挑戰或不可能的任務,不太可能人人適用且受益,那是否有不必改寫程式又可以得到效能改善的方法?說明白點,就是小成本高回收的懶人投資術?答案是有的!就是針對Web 2.0網站勢必會用到的JavaScript進行調校。

在正常情況下,JavaScript本身是直譯式而非編譯式的,它運作過程是在Client端向Server端提出請求,然後由Server端傳送JavaScript檔案到Client端,接著在Browser中進行解析(Parse)與直譯(Interpreted)進而執行程式,然而解析與直譯不是我們人力能夠介入,JavaScript引擎的執行速度也是先天就決定了, 所以對這三個環結的效能調校我們幾乎施不上力。故山不轉路轉,退而求其次可對JavaScript進行最佳化與調整,這事是操之在我,同時也不必改寫任何程式,主要的原理是經由JavaScript檔案大小減肥與最佳化兩個方向著手,讓較小的JavaScript檔案下載變快,系統初始運行時間加速,這樣Web網站就能憑白地加快效能。

那要對JavaScript檔案進行減肥與最佳化的懶人直接做法是什麼?就是呼應本篇文章標題,使用現成的Microsoft AJAX Minifier、Doloto與IIS壓縮工具,透過三者的配合就可以達到效能改善的目的,以下是三者的說明:
一.    Microsoft Ajax Minifier
    Microsoft Ajax Minifier是一種可用來縮小JavaScript檔案的工具,目的是為了增進Ajax網頁程式的執行效能。原理是較小的JavaScript檔,可讓Server端傳送到Client端的時間縮短,讓Browser中的JavaScript可以快點開始工作,效能自然能夠有所提升。
    而Microsoft Ajax Minifier支援兩種縮小化(Minification)層級,說明如下:
1.    正常縮小(Normal crunching)
  • 正常縮小多半只是移除一些不必要的字元或符號,如此便能縮減JavaScript檔案大小,且不會破壞原來程式的語法,其所做的工作如下:
  • 移除不必要的空白字元
  • 移除JavaScript程式註解
  • 移除不必要的分號
  • 移除單一陳述式之大括號
  • 單引號或雙引號的選擇性替換,以產生較少的逸出字元長度
  • 將多行變數宣告合併為一行
  • 移除無參數建構式之圓括號
正常縮小的指令如下:
ajaxmin 原始.js –o 輸出.js

2.    超級縮小(Hypercrunching)
    超級縮小則是比正常縮小的作法還要更積極,但相對的改變性也很大,例如會變更function名稱或移除不必要的程式參照,也相對程式語法會被改寫,其所做的工作如下:
  • 將JavaScript區域變數或function名稱加以縮短,例如將原本冗長的function名稱「function getEmployeeData(){...}」,以較短的名稱取代「function a(){...}」。
  • 分析JavaScript程式碼,找出其中未使用的變數、unreachable陳述式與 functions,並加以移除。

超級縮小的指令如下:
ajaxmin –h 原始.js –o輸出.js

請到以下網址下載安裝Microsoft Ajax Minifier:
http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=34488


在這以著名的jQuery-1.3.2.js(原始未壓縮大小為118KB)的JavaScript Library進行縮小實驗,開啓Microsoft Ajax Minifier命令字元視窗,分別輸入下圖中指令,進行Normal Crunching與Hypercrunching兩種不同程度之縮小化。

Ajax Minifier ajaxmin
圖1 以ajaxmin命令執行JavaScript縮小

檢視下圖,在以ajaxmin命令執行JavaScript縮小後,正常縮小由原本未壓縮的118KB縮小為71KB(減少39%),而超級縮小則更進一步變成55KB(減少53%),由數據可知Microsoft Ajax Minifier縮小減肥的功力十分不錯。

圖2 Ajax Minifier縮小後之檔案大小比較

二.    Doloto
    Doloto是一款Ajax應用程式最佳化工具,目的是為了增進網頁的回應速度,原理是透過優先下載複雜Ajax網頁初始執行所需的JavaScript程式碼,至於不需立即用到的JavaScript程式留到稍後再下載。

Doloto實際運作步驟如下:
  • Doloto在背景側錄欲分析的網站資料,特別是對每個呼叫執行的JavaScript function以TimeStamps方式加以記錄相關資訊。
  • 根據上一步驟所側錄到的資料,決定程式碼覆蓋率(Code Coverage)及分群策略(Clustering Strategy)。
  • 根據分群策略執行JavaScript程式碼的重寫,將初始階段所需程式碼自原本JavaScript檔分割出來,以利初始化傳送。

    使用Doloto對真實世界大型知名網站所做的實驗,可減少初始階段下載的JavaScript程式大小超過40%,網頁程式起始時間可以加速30%~40%,下圖是Doloto最佳化後之數據比較。
圖3 Doloto最佳化後之數據比較

三.    IIS GZIP壓縮
    IIS的壓縮分為兩種類型:靜態與動態壓縮,靜態壓縮主要是針對延伸檔名為js、css、txt、htm與.html之類的檔案,而動態壓縮是針對asp、aspx與dll類的檔案,並且可視需要設定其壓縮比(Compression Level),以調整壓縮對伺服CPU及記憶體的耗用程度。

    至於靜態檔壓縮的成效可提升60%或更高不等,是故若欲對JavaScript檔案進一步再壓縮,便可利用IIS 6靜態壓縮機制,啓用的方式如下:
1.    在【IIS 管理員】中的【網站】按滑鼠右鍵,點選【內容】。
2.    在【服務】索引標籤的【HTTP 壓縮】區段中,選取【壓縮靜態檔案】核取方塊,便可啟用靜態檔案壓縮。
圖4 啓用IIS 6靜態壓縮

至於IIS 7的壓縮,網站預設都會啓用靜態內容壓縮,所以不需任何額外設定。
圖5 IIS 7的壓縮

最後總結,您可以個別運用本篇三個工具來調校JavaScript運作效能,也可以合併三者達到提升網頁效能的最高效益,若要合併運用三者的次序是:第一是Ajax Minifer,第二是Doloto,最後部署才是IIS壓縮,有興趣的您不妨動手試做看看!


ASP.NET MVC技術定位與抉擇←上一篇 │首頁
本文引用網址: