xamWebGrid™ for Microsoft® Silverlight™ 3 的性能和用户体验

如今，每个人都在谈论用户体验——它是新经济中的关键差异化因素。当大多数人谈论其应用程序的用户体验时，通常关注的是应用程序的美学设计，这虽然重要，但只是整体用户体验的一个方面。人们常常忽略了用户体验中一个可能与应用程序美学一样对整体体验产生强烈影响的领域——应用程序性能！

在 Infragistics，我们非常重视您应用程序的用户体验，这意味着我们不仅专注于帮助您提供世界一流的视觉体验，还专注于我们产品在您应用程序中的性能体验。在这篇白皮书中，您将了解到我们如何处理 Silverlight xamWebGrid 的架构和测试，以便我们在市场上提供最快的网格。

立即下载 NetAdvantage® for Web Client: Silverlight 控件的 免费 xamWebGrid 试用版，亲身体验其超快的速度。

为什么性能在整体用户体验中如此重要？

• 更高的客户满意度
• 提高最终用户生产力
• 硬件和带宽的资源效率

客户不希望，也不应该被应用程序开发细节所困扰；他们只关心使用应用程序时的体验。他们想要一个“有道理”的应用程序，这意味着一个提供直观用户界面、性能符合客户预期的应用程序——换句话说——他们不应该注意到或思考其性能。当您选择 Infragistics xamWebGrid 时，您将获得一个能够为最终用户提供这种“有道理”体验的控件，包括市场上最佳的性能。而且这并非以实现自定义 ORM（对象关系映射）解决方案或某些自定义数据提供程序为代价——这是开箱即用的 Silverlight 数据绑定。无需更改您的数据访问策略。

卓越的性能最佳实践

在我们的产品生命周期中，我们会随着新功能的添加或用例的更新，在不同阶段测试我们的控件。我们在性能测试的规划、配置、实施和审查中遵循一系列最佳实践，以确保控件在正确的场景下得到测试，并且我们生成的结果准确无误。

• 规划。 在规划阶段，我们确定测试的对象（与之前的版本、竞争对手等）并考虑在特定平台上进行性能测试的可用选项和工具。我们还确定要测试的具体场景，以及如何创建使用尽可能相同配置的竞争性测试。
• 配置。 在此阶段，我们配置一个测试环境，该环境基于描述产品要求的场景，尽可能模拟客户的使用情况。
• 实施。 我们实施测试计划中概述的测试，并多次执行它们以生成性能统计数据。
• 审查。 在审查期间，我们评估测试结果的一致性，寻找可能表明测试环境存在问题（可能影响测试结果）的异常。基于上述最佳实践，我们对产品的每个夜间构建版本实施并执行自动性能测试。在测试过程中，性能结果会自动存储并生成报告。这使得开发团队能够持续监控整个开发过程的性能。

测试 xamWebGrid

对于 NetAdvantage® for Web Client: Silverlight，我们的大部分性能测试都集中在 xamWebGrid 上，主要是因为其在许多数据密集型应用程序中的使用以及其包含的大量功能。由于我们经常与应用程序需要能够以非常高的刷新率加载大量数据的客户交流，因此在设定性能目标和设计测试时，我们能够考虑这些真实世界的用例来指导我们。为了开始测试 xamWebGrid，创建了以下测试环境来执行性能测试：

• 两台物理机（非虚拟），一台服务器和一台客户端——这将模拟真实场景。
• 服务器和客户端均运行 Microsoft Windows Vista® Enterprise SP1，CPU 2.13GHz，4 GB RAM。
• 服务器运行 Microsoft SQL Server® 2005 作为后端数据存储。
• 客户端运行 Internet Explorer® 7 作为其默认浏览器。
• 服务器和客户端均使用同一台网络交换机，该交换机与公司其他网络流量隔离，以便我们专注于网格的性能，而不是超出我们控制范围的其他影响性能的因素。
• 服务器和客户端均配置有静态 IP 地址。
• 服务器和客户端均已禁用 Windows Update。

为了运行测试，我们编写了代码，将所有测试场景运行了 100 次。场景包括模拟用户点击，到与 SQL Server 2005 的完整 CRUD（创建、读取、更新和删除）操作。每次运行都使用了我们最新的夜间构建版本和最接近的竞争对手控件的最新构建版本。为了确定测试结果，我们记录了每个操作的时间和内存消耗，然后计算了差异。

内存消耗使用 GC.GetTotalMemory 函数计算，时间使用正常的 TimeSpan 函数计算。

性能结果

xamWebGrid 的主要场景确定了以下领域对于使用网格显示和编辑数据的整体用户体验至关重要：

• 扁平化数据绑定
• 滚动（实时，延迟）
• 排序（字符串，数字）

在本白皮书中，除非另有说明，否则我们将展示使用包含 10 列和 1,000,000 行数据的 XamWebGrid 执行这些场景的测试结果。

数据绑定

为了测试基本数据绑定的性能，我们创建了测试来测量将 xamWebGrid 绑定到不同的 ItemSources 并渲染到 LayoutUpdated 事件（或类似事件）所需的时间。我们认为这最能准确地反映最终用户在等待数据加载时所体验到的。

	xamWebGrid	竞争对手 I	竞争对手 II
持续时间（毫秒）	1,881	2,964（慢 57%）	5,541（慢 194%）
内存使用量（前）（KB）	91,958	91,809（少 0.1%）	92,279（多 0.3%）
内存使用量（后）（KB）	99,100	212,233（多 124%）	109,552（多 10%）

	xamWebGrid	竞争对手 I	竞争对手 II
持续时间（毫秒）	1,949	2,878（慢 47%）	5,463（慢 180%）
内存使用量（前）（KB）	91,756	90,183（少 1%）	89,891（少 2%）
内存使用量（后）（KB）	95,726	232,346（多 142%）	109,603（多 14%）

垂直滚动

xamWebGrid 在滚动滚动条滑块时提供两种选项——延迟滚动和实时（即时）滚动。当您有数十万行数据时，延迟滚动允许用户在滚动时预览记录的值（例如，在工具提示中），而无需填充所有单元格，直到用户到达他们想要去的数据网格位置。我们创建了测试来衡量这两种选项的性能。

延迟滚动

我们只能测试一个提供延迟滚动功能的竞争性 Silverlight 数据网格控件，因为它是唯一提供此功能的控件。

	xamWebGrid	竞争对手 I
持续时间（毫秒）	874	14,160（慢 1,519%）
内存使用量（前）（KB）	16,431	45,265（多 175%）
内存使用量（后）（KB）	16,615	80,926（多 387%）

实时滚动

正如您将在表 4 的性能结果中看到的，实时（或即时）滚动在 Silverlight 中是一个大问题。您看到的大多数供应商示例都加载了有限的数据，因为控件的滚动性能非常差。

	xamWebGrid	竞争对手 I	竞争对手 II
持续时间（毫秒）	1,267	29,845（慢 2,256%）	4,615（慢 264%）
内存使用量（前）（KB）	21,601	52,242（多 141%）	122,090（多 465%）
内存使用量（后）（KB）	22,781	106,722（多 368%）	125,268（多 449%）

排序

排序性能可能因要排序的数据类型而异，但根据客户反馈，我们对 IList 和 ObservableCollection 数据源进行了数字和字符串排序测试。

	xamWebGrid	竞争对手 I	竞争对手 II
持续时间（毫秒）	2,116	11,249（慢 431%）	407,194（慢 19,140%）
内存使用量（前）（KB）	92,552	203,758（多 120%）	104,120（多 12%）
内存使用量（后）（KB）	129,162	340,155（多 163%）	112,315（少 13%）

	xamWebGrid	竞争对手 I	竞争对手 II
持续时间（毫秒）	10,124	15,715（慢 55%）	277,044（慢 2,636%）
内存使用量（前）（KB）	95,652	222,433（多 132%）	109,680（多 14%）
内存使用量（后）（KB）	113,918	284,077（多 149%）	114,848（多 0.8%）

	xamWebGrid	竞争对手 I	竞争对手 II
持续时间（毫秒）	2,116	12,880（慢 508%）	414,199（慢 19,470%）
内存使用量（前）（KB）	92,649	210,409（多 127%）	106,842（多 15%）
内存使用量（后）（KB）	129,435	332,408（多 156%）	112,010（少 13%）

	xamWebGrid	竞争对手 I	竞争对手 II
持续时间（毫秒）	10,107	17,568（慢 73%）	278,919（慢 2,659%）
内存使用量（前）（KB）	93,058	233,002（多 150%）	109,660（多 17%）
内存使用量（后）（KB）	117,847	269,464（多 128%）	114,676（少 2%）

实现惊人的性能

那么，我们如何实现 xamWebGrid 如此惊人的性能呢？简单的答案是——一个坚实的架构，它利用 UI 虚拟化来实现几乎所有用户交互操作。UI 虚拟化允许 xamWebGrid 创建最少的 UI 对象来渲染网格的可视区域。此外，我们的 UI 虚拟化基础设施不仅减少了 xamWebGrid 所需的 UI 元素数量，而且在可视区域改变时还会回收 UI 对象，大大减少了控件必须执行的对象实例化和垃圾回收操作。对于包含数百甚至数千行和数十甚至数百列的大型数据集，这些对象操作会对应用程序的性能产生显著影响。

在下图中，您可以看到 xamWebGrid 的 UI 虚拟化基础设施如何在 xamWebGrid 的可见区域滚动时回收行和列 UI 元素。

处理任何大小的数据集时，UI 虚拟化都是卓越用户体验的关键。

理解视觉树

Silverlight 使用称为视觉树的概念来跟踪应用程序中的所有视觉元素。任何提供视觉表示的对象（任何派生自 FrameworkElement 的对象）都必须添加到视觉树中，才能让 Silverlight 渲染它。UI 元素可以有其他 UI 元素作为子元素，从而形成 Silverlight 渲染到屏幕上的元素树状分层结构。正如您所能想象的，除了最简单的应用程序，视觉树中的节点（或 UI 元素）数量可能会非常大。

例如，让我们看一下 NetAdvantage for WebClient: Silverlight 系列业务样本应用程序的主屏幕。

这个屏幕加载了超过 800 个单独的 UI 元素到应用程序的视觉树中。您可以想象，当您开始添加像 ListBoxes 和 DataGrids 这样会重复自身的绑定控件时，很容易在应用程序的视觉树中快速获得数千个 UI 元素。

允许视觉树过大，或通过添加和删除树节点在树中产生大量更改，都可能导致 Silverlight 的渲染性能下降。xamWebGrid 利用其 UI 虚拟化来保持极轻量级的 UI 元素占用空间，仅将对最终用户可见的 UI 元素添加到视觉树中。

选择 Infragistics xamWebGrid 可最大化 ROI

为了了解在典型的业务应用程序中，高性能网格的整体 ROI（投资回报率）是多少，让我们来看看最终用户在日常使用您构建的应用程序时可能遇到的常规操作。

假设一个呼叫中心使用您的应用程序，每个员工处理一个客户需要 5 分钟。通常，为了处理一个客户，呼叫中心应用程序需要执行以下操作：

• 加载数据（绑定）
• 搜索
• 排序
• 滚动
• 添加新记录
• 修改记录
• 记录筛选
• 分页
• 等等。

让我们将 xamWebGrid 与“竞争对手 I”进行比较（对于“竞争对手 II”，xamWebGrid 的优势更大）。

	xamWebGrid	竞争对手 I
绑定到 Observable Collection	1,949	2,878（慢 47%）
延迟滚动	874	14,160（慢 1,519%）
数字排序	2,116	12,880（慢 508%）
字符串排序	10,107	17,568（慢 73%）
总计	15,046	47,486（慢 215%）

使用 xamWebGrid，**每次操作可以节省 30 秒**。一天结束时，呼叫中心将至少提高 10% 的生产力，这可能带来每周数万美元甚至每年数百万美元的节省。

摘要

您可以看到，通过采用强大的性能测试框架，您可以进一步提高实际节省时间和感知体验的价值。我们通过使用基于虚拟化元素行为的坚实架构来实现这一点。我们还遵循严格的最佳实践方法来设置和运行测试——每个测试都在 Infragistics 的最新版本和我们竞争对手的最新服务版本上进行。

通过使用 xamWebGrid，您的应用程序不仅看起来更好、更易于使用，而且它们的性能还将超越当今市场上任何可用的产品。这带来了更高的最终用户满意度和您部署的应用程序在生产力方面的实际金钱节省。

要立即获取 xamWebGrid，您可以下载它以及 Infragistics 的其他许多 Silverlight 业务 UI 控件，位于 NetAdvantage for Web Client: Silverlight 控件中，进行 免费 xamWebGrid 试用。

版权 © 2008-2009 Infragistics, Inc. 保留所有权利。Infragistics 和 NetAdvantage 是 Infragistics, Inc. 的注册商标。xamWebGrid 是 Infragistics, Inc. 的商标。所有其他商标或注册商标均为其各自所有者的财产。