Infragistics Silverlight xamgrid のパフォーマンスインフラジスティックスホワイトペーパー 2009 年 9 月 1 日発行 2010 年 10 月 15日改訂目次パフォーマンスとユーザーエクスペリエンス... 2 比類無きパフォーマンスを実現するベストプラ

(1)

Page 1 of 18

Copyright © 1996-2010 Infragistics, Inc. All rights reserved.Infragistics、Infragistics ロゴおよび NetAdvantage は Infragistics, Inc. の登録商標です。xamGrid は Infragistics, Inc. の登録商標です。他のすべての商標または登録商標はそれぞれの会社の所有物です。

Infragistics

®

_{Silverlight xamGrid}

™

_{のパフォーマンス}

インフラジスティックスホワイトペーパー 2009 年 9 月 1 日発行 2010 年 10 月 15日改訂

パフォーマンスとユーザーエクスペリエンス ... 2 比類無きパフォーマンスを実現するベストプラクティス ... 4 xamGrid のテスト ... 5 パフォーマンステストの結果 ... 6 データバインディング ... 7 縦スクロール ... 8 リアルタイムスクロール ... 8 遅延スクロール ... 8 並べ替え ... 10 階層データソースにバインド ... 11 階層グリッドの展開 ... 12 階層グリッドの縮小 ... 12 驚くべきパフォーマンスの実現 ... 13 ビジュアルツリーについて ... 14 インフラジスティックスの xamWebGrid を採用した場合の ROI ... 16 おわりに ... 18

(2)

Page 2 of 18

パフォーマンスとユーザーエクスペリエンス ユーザーエクスペリエンスは現代のシステムにおいて差別化を図るための重要な要素であり、近年その必要性が特に叫ばれています。アプリケーションのユーザーエクスペリエンスが話題になるとき、ほとんどの場合、その会話の主眼はアプリケーションの外観設計に置かれています。見た目の美しさは、重要な要素ではありますが、総合的なユーザーエクスペリエンスの 1 つの側面に過ぎません。総合的なユーザーエクスペリエンスにとって、アプリケーションの美観設計と同じくらい重要な要素でありながら、往々にして見過ごされる側面がアプリケーションのパフォーマンスです。インフラジスティックスでは、アプリケーションのユーザーエクスペリエンスを極めて重要な要素と考え、当社の製品を利用してアプリケーションを作成するみなさんがそれぞれのエンドユーザーに対してワールドクラスのビジュアルエクスペリエンスと、さらに最高のパフォーマンスエクスペリエンスを提供できるようお手伝いする点に重点を置いています。本ホワイトペーパーでは、インフラジスティックスが業界最速のグリッドを提供するために採用するSilverlight xamGrid のアーキテクチャおよびテスト手法について明らかにします。ユーザーエクスペリエンスにおいて、なぜパフォーマンスが重要になるのでしょうか？ • 顧客満足度の向上 • エンドユーザーの生産性が高まる • ハードウェア資源やネットワーク帯域幅の利用効率が向上するエンドユーザーは、アプリケーションの開発方法の詳細を知りたいわけではなく、またそうした情報でエンドユーザーを悩ませることがあってはいけません。エンドユーザーの関心は、主にアプリケーションの使用感、つまりユーザーエクスペリエンスにあります。エンドユーザーの望むアプリケーションは、単純に「納得できる」アプリケーション、つまり直観的なユーザーインタフェースを備え、期待通りに動いてくれるアプリケーションです。したがって、エンドユーザーにアプリケーションの仕組みを気づかせたり、考えさせたりしてはいけません。インフラ

(3)

Page 3 of 18

ジスティックス xamGrid の採用により、業界最高のパフォーマンスと共に、「わかりやすい」ユーザーインタフェースを備えたコントロールを手に入れることができます。また、PC 内で行われる Silverlight のデータバインディングによって実現されるため、xamGrid の使用には、カスタム ORM (オブジェクトリレーショナルマッパー) ソリューションの実装も、他のカスタムデータプロバイダーも不要です。データアクセスの方法を変更する必要はありません。

(4)

Page 4 of 18

比類無きパフォーマンスを実現するベストプラクティス インフラジスティックスでは、新機能の追加や想定されるユースケースの更新に伴い、製品ライフサイクルのさまざまな段階でコントロールのテストを実施しています。われわれは、コントロールのテストを正しいシナリオで実施 して正確なテスト結果を得るために、プランニング、構成、実装、レビューの各段階でパフォーマンステストを最 良の方法で進めています。 • プランニング – プランニング段階では、テストに使用する比較対象 (以前のビルドや競合製品など) を決定し、特定のプラットフォームでのパフォーマンステストに使用するオプションやツールを検討します。また、テストシナリオを特定し、できる限り同じ条件を使用した比較テストを作成します。 • 構成 – この段階では、製品要件を規定するシナリオに基づいてエンドユーザーの使用環境を可能な限り正確にシミュレートするテスト環境を構成します。 • 実装 – テストプランに記述されたテストを実装し、何度もテストを実行してパフォーマンスデータの統計を取ります。 • レビュー段階では、テスト結果の再現性を評価し、テスト環境を確認し、テスト結果に影響を及ぼすような問題点がないかを調べます。上記のベストプラクティスに基づいて、製品の各ナイトリービルドに対して自動パフォーマンステストを実施します。テスト中、性能計測値が自動的に記憶されてレポートが生成されます。これにより、開発チームは、開発工程全体を通じて常に性能をモニターできるようになります。

(5)

Page 5 of 18

xamGrid のテスト NetAdvantage® Silverlight については、多くのデータ集約型アプリケーションで使用され、さまざまな機能を備えたコントロールであるため、xamGrid に重点を置いてパフォーマンステストが実施されました。インフラジスティックスのお客様の中には、非常に高い更新頻度で大量のデータをロードできるグリッドコントロールを必要とするアプリケーションを作成している方々がいます。インフラジスティックスは、そうしたお客様から定期的にお話しを伺うことで、パフォーマンス目標の設定テストや、デザインする際の指針となる実際の使用シナリオを策定しています。xamGrid のテストを開始するために、次のようなテスト環境を作成してパフォーマンステストを実施しました。xamGrid のパフォーマンステストには、次のようなテスト環境を使用しました。 • 2 台の物理マシン (非仮想)、1 台のサーバー、1 台のクライアント。実際のシナリオをシミュレートする環境。

• サーバーとクライアントは、どちらも Microsoft Windows 7 の稼働するマシンで、2.13 GHz の CPU と 4 GB の RAM。 • サーバーマシンは、データストアとして Microsoft SQL Server 2005 を使用。 • クライアントは、デフォルトブラウザーとして Internet Explorer® 8 を使用。 • サーバーとクライアントは、制御不能な他のパフォーマンス抑制要因を排除してグリッドのパフォーマンスを調べるため、他の企業ネットワークトラフィックから切り離された同じ交換ネットワークを使用。 • サーバーとクライアントの双方に固定 IP アドレス。

(6)

Page 6 of 18

• サーバーもクライアントも、Windows Update を無効。 • クライアントは Silverlight 4 (4.0.50917.0) を使用。テストシナリオには、ユーザーによるクリック操作のシミュレーションから、SQL Server 2005 による CRUD (作成/読み取り/更新/削除) 操作に至るまでの各種シナリオが含まれています。各テストには、インフラジスティックスと競合他社のテスト時点における最新ビルド版コントロールを使用しました。また、テスト結果を比較するために、各操作の所要時間を記録し、その時間差を計算しました。メモリー消費量は、GC.GetTotalMemory 関数で、時間は通常の TimeSpan 関数で計算しました。 パフォーマンステストの結果 xamGrid に関する主なシナリオでは、データの表示/編集にグリッドを使用した場合に総合的なユーザーエクスペリエンスに大きく影響する以下のパフォーマンスをテストしました。こうしたテストアプリケーションは、アプレット単位でのあらゆる範囲のパフォーマンス比較テストに対応するもので、銀行やコールセンター、保険会社などで見られる実世界シナリオをシミュレートするものです。この比較テストには、インフラジスティックスや競合他社の Web サイトで公開されている情報をすべて利用しました。このホワイトペーパーでは、Infragistics xamGrid™ と競合 2 製品のグリッドのパフォーマンスを比較し、以降、競合製品 I、競合製品 II とします。 WebDataGrid に関する主要なシナリオでは、データの表示/編集にグリッドを使用した場合にユーザーエクスペリエンス全体に大きな影響を与える以下の重要な各領域についてパフォーマンステストを行ないました。 • フラットなデータのバインディング

(7)

Page 7 of 18

• スクロール(リアルタイムおよび遅延) • 並べ替え (文字列および数値) • 階層データバインディング • 階層データの展開/縮小特に指定のない限り、本ホワイトペーパーに示すテスト結果は、10 列、1,000,000 行のデータを処理したときのものです。 データバインディング 基本データバインディングのパフォーマンスを調べるために、われわれは、さまざまな ItemSources に xamGrid をバインドして LayoutUpdated イベント (または、類似イベント) をレンダリングするまでの所要時間を測定するテストを作成しました。われわれは、このテストがデータロードの完了を待っているエンドユーザーの体感速度を最も正確に表す数値と考えています。表1：IList へのバインディング - 10 列、1,000,000 行のデータ IG xamGrid™ 競合製品 I 競合製品 II 所要時間 (ms) 1,028 2,050 99% 遅い 1,962 90% 遅い テスト前のメモリー使用量 (Kb) 91,852 88,964 3% 少ない 90,683 1% 少ない テスト後のメモリー使用量 (Kb) 91,762 144,394 57% 多い 128,511 40% 多い表2：ObservableCollection へのバインディング - 10 列、1,000,000 行のデータ IG xamGrid™ 競合製品 I 競合製品 II 所要時間 (ms) 1,028 2,025 96% 遅い 1,962 90% 遅い テスト前のメモリー使用量 (Kb) 91,852 91,360 ~ ほぼ同じ 90,660 1% 少ない テスト後のメモリー使用量 (Kb) 91,762 113,795 24%多い 128,207 39%多い

(8)

Page 8 of 18

縦スクロール xamWebGrid には、スクロールバーサム (つまみ) によるスクロール動作について、「遅延」と「リアルタイム (即時)」という 2 つのオプションがあります。データが数十万行に及ぶ場合、遅延スクロールを使用すると、データグリッド内の目的のポイントまでセルをすべて埋めなくても、スクロールしながら (たとえば、ツールチップで) レコードの値をプレビューできるようになります。われわれは、両方のオプションでパフォーマンスを計測するテストを策定しました。

スクロールのシナリオには、Silverlight automation framework を使用しました。

リアルタイムスクロール 表 3 のパフォーマンス測定値から分かる通り、リアルタイム (即時の) スクロールは、Silverlight における大きな問題です。このコントロールのスクロールパフォーマンスは極めて低いため、ほとんどのベンダーのサンプルは、限られた量のデータしかロードしません。表3：91 列、600 行のデータでのリアルタイムスクロール IG xamGrid™ 競合製品 I 所要時間 (ms) 883 1,448 64% 遅い テスト前のメモリー使用量 (Kb) 26,801 33,599 25% 多い テスト後のメモリー使用量 (Kb) 27,934 21,847 21% 少ない * 競合 II はつまみを最後までスクロールできないという問題が発生し、テストを完了できませんでした。 遅延スクロール 遅延スクロールに関しては、競合製品を 1 つしかテストできませんでした。この機能を備えた競合製品が他に存在しなかったためです。

(9)

Page 9 of 18

表4：91 列、600 行のデータでの遅延スクロール IG xamGrid™ 競合製品 I 所要時間 (ms) 750 752 ~ ほぼ同じ テスト前のメモリー使用量 (Kb) 26782 33614 25% 多い テスト前のメモリー使用量 (Kb) 26726 21888 18% 少ない *競合 II はつまみを最後までスクロールできないという問題が発生し、テストを完了できませんでした。

(10)

Page 10 of 18

並べ替え 並べ替えのパフォーマンスは、並べ替えするデータの型によって変化しますが、ここに示すパフォーマンス値はお客様からフィードバックされた値です。われわれは、IList および ObservableCollectionデータソースに対する数値および文字の並べ替えをテストしました。表5： IList を使用した数値列値の並べ替え - 10 列、1,000,000 行のデータ IG xamGrid™ 競合製品 I 競合製品 II 所要時間 (ms) 1,957 2,764 41% 遅い 7,889 303% 遅い テスト前のメモリー使用量 (Kb) 91,447 125,025 36% 多い 128,897 40% 多い テスト後のメモリー使用量 (Kb) 129,083 150,777 16% 多い 141,029 9% 多い表6： IList を使用した文字列値の並べ替え - 10 列、1,000,000 行のデータ IG xamGrid™ 競合製品 I 競合製品 II 所要時間 (ms) 7,172 7,964 11% 遅い 9,566 33%遅い テスト前のメモリー使用量 (Kb) 91,378 132,320 44% 多い 128,707 40% 多い テスト後のメモリー使用量 (Kb) 117,313 149,873 27% 多い 128,007 9% 多い表7：ObservableCollection を使用した数値列値の並べ替え - 10 列、1,000,000 行のデータ IG xamGrid™ 競合製品 I 競合製品 II 所要時間 (ms) 1,968 2,818 43% 遅い 7,890 300% 遅い テスト前のメモリー使用量 (Kb) 91,809 114,765 25% 多い 128,415 39% 多い テスト後のメモリー使用量 (Kb) 97,388 118,945 22% 多い 145,979 49% 多い

(11)

Page 11 of 18

表8：ObservableCollection を使用した文字列値の並べ替え - 10 列、1,000,000 行のデータ IG xamGrid™ 競合製品 I 競合製品 II 所要時間 (ms) 7,293 8,038 10% 遅い 9,598 31%遅い テスト前のメモリー使用量 (Kb) 91,987 115,063 25% 多い 128,361 39% 多い テスト後のメモリー使用量 (Kb) 116,807 115,590 1% 多い 126,567 8% 多い 階層データソースにバインド 階層データバインドのパフォーマンステストでは、xamGrid をさまざまな ItemSources へバインドし、 LayoutUpdated イベント (または、類似イベント) へ描画するために要した時間を計測しました。われわれは、このテストがデータロードの完了を待っているエンドユーザーの体感速度を最も正確に表す数値と考えています。

表 9: WCF service および ObservableCollection を使用した NorthWind テーブル Customers-Order-OrderDetails へのバインド IG xamGrid™ 競合製品 I 競合製品 II 所要時間 (ms) 950 1,504 58%遅い 6,486 582% 遅い テスト前のメモリー使用量 (Kb) 3,471 3,747 7% 多い 3,908 12% 多い テスト後のメモリー使用量 (Kb) 6,507 7,315 12% 多い 11,510 76% 多い

(12)

Page 12 of 18

階層グリッドの展開

レコードを展開した場合の結果です。

ボタンをクリックするとすべてのグリッドが展開されます。

表10：WCF service および ObservableCollection を使用した NorthWind テーブル Customers-Order-OrderDetails へバインドしたすべてのレコードを展開 IG xamGrid™ 競合製品 I 競合製品 II 所要時間 (ms) 1,398 46,466 3223% 遅い 3,217 130% 遅い テスト前のメモリー使用量 (Kb) 6,659 7,947 19% 多い 11,576 73% 多い テスト後のメモリー使用量 (Kb) 17,743 66,916 277% 多い 20,250 14% 多い 階層グリッドの縮小 レコードを縮小した場合の結果です。ボタンをクリックするとすべてのグリッドが縮小されます。

表11：WCF service および ObservableCollection を使用した NorthWind テーブル Customers-Order-OrderDetails へバインドしたすべてのレコードを縮小

IG xamGrid™ 競合製品 I 競合製品 II

所要時間 (ms) 249 1,849 642%遅い 1,060 325%遅い

テスト前のメモリー使用量 (Kb) 18,183 68,790 278% 多い 20,457 12% 多い

(13)

Page 13 of 18

驚くべきパフォーマンスの実現

それでは、どのような仕組みで xamWebGrid の驚くべきパフォーマンスが実現されているのでしょうか？答えは簡単です。ほぼすべてのユーザーインタラクション操作に UI Virtualization （UIの仮想化）を利用する堅固なアーキテクチャを採用した結果です。UI Virtualization により、xamGrid は、グリッド表示領域のレンダリングに必要なUI オブジェクトセットを最小限にすることができます。さらに、当社の UI Virtualization インフラストラクチャーは、xamWebGrid に必要な UI 要素の数を減らすだけでなく、表示領域の移動に伴って UI オブジェクトを再利用するため、コントロールが実行しなければならないオブジェクトのインスタント化操作やガベージコレクション操作の数を大幅に減らします。数百行～数千行、もしくは数十列～数百列の大きなデータセットの場合、こうしたオブジェクト操作はアプリケーションのパフォーマンスに大きく影響します。

下の図は、xamWebGrids の UI Virtualization インフラストラクチャーにおいて xamWebGrid の表示領域を外れた列と行の UI 要素が再利用される仕組みを示したものです。

(14)

Page 14 of 18

どのようなサイズのデータセットを扱う場合でも、UI Virtualization は、優れたユーザーエクスペリエンスの実現 にとって重要です。 ビジュアルツリーについて Silverlight は、「ビジュアルツリー」という概念を使用して、アプリケーション内のすべてのビジュアル要素を管理します。Silverlight に描画オブジェクト (FrameworkElement を継承するオブジェクト) をレンダリングさせるためには、そのオブジェクトを「ビジュアルツリー」に追加しておく必要があります。UI 要素には他の UI 要素を子として指定できるため、Silverlight によって画面にレンダリングされる要素はツリー状の階層構造になっています。そのため、非常に単純なアプリケーション以外では、「ビジュアルツリー」内のノード (UI 要素) が膨大な数になることは容易に想像できます。

一例として、NetAdvantage for WebClient: Silverlight のサンプルアプリケーションのメイン画面を見てみましょう。

(15)

Page 15 of 18

この一画面だけで、アプリケーションビジュアルツリーに読み込まれる UI 要素の数は 800 を超えます。データがバインドされていて、なおかつ反復して現れるコントロール、たとえば、ListBox や DataGrid などを追加すると、 UI 要素の数はすぐに数千に達します。

「ビジュアルツリー」を大きくしすぎた場合やツリーノードの追加/削除を繰り返してツリーの中身が複雑になった場合、Silverlight のレンダリングパフォーマンスが低下する可能性があります。UI Virtualization を利用することで、xamWebGrid は、エンドユーザーに表示される UI 要素だけを「ビジュアルツリー」に追加し、レンダリングする UI 要素を非常に少なくしています。

(16)

Page 16 of 18

インフラジスティックスの xamWebGrid を採用した場合の ROI 一般的な業務アプリケーションにおける高パフォーマンスなグリッドを使用した場合のROI（投資回収率）を明らかにする前に、エンドユーザーが日常的にどのようなアプリケーション操作を行っているか考えてみましょう。みなさんの作成したアプリケーションが、あるコールセンターで使用されていると想像してみてください。コールセンターの各スタッフは 1 件の顧客処理に 5 分かかるとします。通常、1 件の顧客処理を完了させるために、コールセンターアプリケーションは以下の操作を実行しなければなりません。 • データのロード (バインディング) • 検索 • 並べ替え • スクロール • 新規レコードの追加 • レコードの修正 • レコードの絞り込み • ページング • 等々 …

xamWebGrid を「競合製品 I」と比較してみましょう (「競合製品 II」と比較した場合、xamWebGrid のアドバンテージはさらに大きくなります)。表12：Silverlight 対応型のビジネスアプリケーションに xamGrid を採用した場合の投資回収率。 所要時間 (ms) IG xamGrid 競合製品 I 競合製品 II Observable Collection への バインディング 1,028 2,025 96%遅い 1,962 90%遅い 数値並べ替え 1,968 2,818 43%遅い 7,890 300%遅い 数値並べ替え 7,293 8,038 10%遅い 9,598 31%遅い リアルタイム縦スクロール 883 1,448 64%遅い * 遅延スクロール 750 751 ~ ほぼ同じ * 階層データソースへのバイン ド 950 1,504 58%遅い 6,486 582%遅い すべて展開 1,398 46,466 3223%遅い 3,217 130%遅い

(17)

Page 17 of 18

すべて縮小 249 1,849 642% 遅い 1,060 325%遅い合計 14,519 64,898 346%遅い * 合計 (スクロールなし)* 12,886 62,699 386%遅い 30,213 134% 遅い *競合 II はつまみを最後までスクロールできないという問題が発生し、テストを完了できませんでした。 xamGrid を使用すると、顧客処理 1 件あたり数秒の時間を節約できます。コールセンターの 1 日の生産性は最低でも2, 3 % 向上することになり、1 週間で数万ドル、1 年間で数百万ドルの節約が可能になります。

(18)

Page 18 of 18

おわりに 確かなパフォーマンステストのフレームワークを採用することにより、実際の短縮時間や体感速度という点でアプリケーションパフォーマンスを一段と強化できます。インフラジスティックスでは、UI Virtualization を利用した強固なアーキテクチャ基盤を採用することでパフォーマンスの強化を実現しています。また、厳格なベストプラクティスに従ってテストを策定/実施し、どのテストにもインフラジスティックス製品の最新リリースと競合製品の最新サービスリリースを使用しています。また、厳密なベストプラクティスに従ってテストを策定/実施し、どのテストにもインフラジスティックス製品の最新リリースと競合製品の最新サービスリリースを使用しています。 xamGrid を使用することにより、アプリケーションに、洗練した外観や使いやすい UI を実装するだけでなく、現在市販されているどのアプリケーションよりも高いパフォーマンスを発揮するようになります。みなさんの作成したアプリケーションはエンドユーザーの生産性を高めるため、エンドユーザーの満足度は高まり、エンドユーザーが実際に節約できる金額も多くなります。いますぐインフラジスティックスの xamGrid を入手するには、 http://jp.infragistics.com/dotnet/netadvantage/silverlight.aspx#Downloads からトライアル版をダウンロードしてください。