C# 高效能開發實戰：樹狀列表控件實戰部署與效能對比總結（下）

後台資料服務頁面：TreeViewNodeXML.aspx

此頁面為第二棵樹狀列表提供動態子節點資料，純後台邏輯無 HTML 輸出。.aspx 僅含一行指令：

<%@ Page language="c#" Inherits="CS_Discovery.TreeViewNodeXml" CodeFile="TreeViewNodeXML.aspx.cs" %>

Page_Load 核心邏輯

1. 讀取 QueryString 參數 KeyType、KeyValue。
2. 設定回應 ContentType = "text/xml"、編碼 936 (GB2312)。
3. 建立 XmlTextWriter 輸出 XML，啟用縮排。
4. 連接 Access 資料庫 SkyDemo.mdb。
5. 依 KeyType 分支查詢：

// KeyType == "customerid"：查詢該客戶所有訂單
cmd.CommandText = "select orderid, shipname from orders where customerid='" + KeyValue + "' order by orderid";
// 輸出 Node 元素，含 ID、Icon、Text、XMLSource（指向自身，KeyType=orderdetails）

// KeyType == "orderdetails"：查詢訂單明細貨品
cmd.CommandText = @"select products.productname, orderdetails.quantity 
  from orderdetails, products 
  where orderdetails.productid = products.productid and orderdetails.orderid=" + KeyValue;
// 輸出 Node 元素，含 ID、Icon、Text、OnClick，無 XMLSource（葉節點）

效能實測對比：伺服器端 vs 客戶端渲染

演示頁面 Default.aspx 同時展示兩棵樹（均 3 層、3000+ 節點）：

• 左側（客戶端渲染）： GenerateAtServer=false, IndentXML=false，HTML 體積 ~300KB，主要為純 XML 資料。
• 右側（伺服器端渲染）： GenerateAtServer=true，HTML 體積 ~2MB，膨脹 6 倍，含大量樣式與結構標籤。

結論：大量節點場景下，客戶端渲染 + XML/XSLT 傳輸純資料 可大幅降低頻寬佔用與傳輸延遲，驗證了 XML/XSLT 在 Web 應用中改善網路傳輸效能的實戰價值。

控件部署指南

1. 編譯前確認 SkyTreeViewControl.bmp、SkyTreeViewControl.xslt 設為「嵌入的資源」。
2. 專案加入 DLL 參考，工具箱右鍵「選擇項目」瀏覽加入 SkyTreeViewControl。
3. 將所有 SkyTreeViewControl_ 前綴圖片檔複製至 Web 應用程式根目錄。
4. 拖曳控件至 .aspx 頁面即可使用。

本章小結

• 分析傳統樹狀列表（如 dtree）的效能瓶頸：客戶端 JS 字串拼接 HTML。
• 開發新一代控件 SkyTreeViewControl，支援伺服器端/客戶端雙模式 XSLT 渲染、按需動態載入子節點。
• 實戰應用 IE XML 資料島與客戶端 transformNode 技術，大幅提升大量節點渲染速度。
• 證明 XML/XSLT 架構在 Web 開發中減少網路傳輸、提升效能的實戰效果。