讀者 Joe 詢問在 6/21 ASP.NET AJAX 研討會中,網頁流量分析是使用Firefox的哪一個附加元件?

摘要:讀者 Joe 詢問在 6/21 ASP.NET AJAX 研討會中,網頁流量分析是使用Firefox的哪一個附加元件?

問題:

Dear 章老師,您好,請教您在 6/21 研討會中利用 Firefox 展示 ScriptManager ToolkitScriptManager 的差異性時,可顯示網頁的下載次數與載入完成時間,是安裝哪一個 Firefox 的附加元件,感謝。

解答:

每一個 ASP.NET AJAX 網頁一定要擁有一個 ScriptManager 控制項,而且也只能擁有一個 ScriptManager 控制項。如果您已經安裝 2007 6 7 日(台灣時間)之後所發行的 AJAX Control Toolkit,就可以將 ScriptManger 置換成 ToolkitScriptManager 。同樣的,一個網頁也只能使用一個 ToolkitScriptManager 控制項。

AJAX Control Toolkit
在設計之初,考量程式碼維護等相關議題,於是讓各個控制項或擴充器所內嵌的 JavaScript 程式碼彼此獨立,也就是說,每一個控制項或擴充器的 JavaScript 程式碼是儲存在不同的 .js 檔中。其結果是,如果您所執行的網頁已加入了ASP.NET AJAX Control Toolkit 的擴充器或控制項,而且該擴充器或控制項擁有內嵌的 JavaScript 程式檔時,瀏覽器必須向 Web 伺服器提出多次的查詢請求(Request)才能將所有的 JavaScript 程式檔完全下載,這樣的作法,不僅增加網路流量,處理時間也會加長。

為瞭解決上述的問題,於 2007 6 7 日之後所發行的 AJAX Control Toolkit 特別加入一個新的控制項 ToolkitScriptManager,用來加強原本 ScriptManger 控制項功能,以便動態地將數個 JavaScript 程式檔合併成單一檔案,並且會先行壓縮再開始下載,立竿見影的效果就是所需下載的檔案數量減少,檔案大小也會縮減,請求次數與下載時間當然也就大幅減少。

為了讓大家可以瞭解使用 ToolkitScriptManager 之前與之後的差異,我們將透過網頁流量監控工具來比較兩者的請求與下載數據。由於 IE 瀏覽器沒有提供比較好用的流量監控工具,因此我們改用 FireFox 瀏覽器,並安裝 FireBug(螢火蟲) 這個附加元件,網址如下所示:

http://www.getfirebug.com/

 


圖表
1

 

 

圖表 2

 

 

圖表 1 所示者是網頁在使用 ScriptManger 控制項時所量測出來的結果,它一共提出 34 次查詢請求,耗費 23.42 秒的查詢時間。接著我們如下所示,將原本的 ScriptManger 控制項換成 ToolkitScriptManager 控制項:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

換成

<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />

圖表 2 所示者,是將網頁改用 ToolkitScriptManager 控制項後所量測出來的結果,它一共提出 23次查詢請求,耗費 12.75 秒的查詢時間。瀏覽器向 Web 伺服器提出請求的數量減少了 11 次,查詢耗費時間則減少近11  秒,兩項數據則清楚顯示出 ToolkitScriptManager 控制項的成效。


或許您心中還會存在另外一個疑問,我們之前不是說 ToolkitScriptManager 控制項會將數個 JavaScript程式檔合併成單一檔案,為什麼下載的資料量卻只有減少區區 6 KB 而已。請特別注意,網頁流量監控軟體 FireBug 所顯示的資料量,是最後下載至瀏覽器且已解壓縮之後的JavaScript 大小,而非 JavaScript 於網路傳輸時的壓縮大小。ToolkitScriptManager 支援 Gzip DEFLATE 壓縮演算法,所以當瀏覽器與網頁伺服器在網路上傳輸 JavaScript 程式檔時,其所傳輸之資料量自然會比 FireBug 所顯示的資料量來的少。

最後要提醒大家,由於 ToolkitScriptManager 是衍生自 ScriptManager,因此 ToolkitScriptManager 會繼承 ScriptManager 的所有功能。


章立民研究室 2007/6/24