具有大量 UI 对象的 Flex 应用程序 == 速度慢？

Question

我正在 Flex 3 中构建我的第一个 Flex 自定义组件。它是一个基于“Grid”容器类的数据表，每个单元格中都有一个简单的文本标签。 （DataGrid 和 AdvancedDataGrid 不是满足我的需求的合适起点。）该组件在使用较小的表时工作得很好，但我尝试使用较大的表对其进行压力测试，并对结果感到失望。

组件创建过程有一些缓慢的地方，但这些是我有能力优化的，并不是我主要关心的。 让我更担心的是 Flex 框架本身的局限性。

这个“大”样本表中有超过 7000 个单元格。 这是很大的，但仍然比我需要容纳的最大数量小 1-2 个数量级。 在标准网格结构中，组件的主要部分由一个具有 400 个 GridRows（每个 16 个 GridItems）的 Grid 以及一些其他较小的辅助网格组成。

表格渲染后，我发现以下内容：

• 与鼠标相关的事件触发缓慢。 具体来说，我在每个表格单元格上注册了 rollOver/rollOut 事件处理程序，以便我突出显示指针下方的单元格。 在小桌子上，我可以非常快速地在桌子上移动鼠标，并且突出显示会实时跟随指针。 对于较大的表格，突出显示非常不稳定，每秒仅更改大约两次，跳过许多单元格。
• 如果我将鼠标光标放在该组件上并将其留在那里，我的 CPU 就会被固定（无论如何，一个处理器核心），并保持这种状态，直到我离开该组件，此时它会进入空闲状态。 我的组件此时根本没有执行任何操作。

感觉 Flex 根本无法扩展以支持这么大的组件树。 我不敢想象 100,000 个细胞会如何表现。 也许我正在推动 Grid 超出其预期用途，但每个表单元格都有一个对象似乎并不是一个不合理的模型，并且树中大约 14,000 个对象（每个单元格一个 GridItem 和一个 Label）似乎相当适中。

我还没有从 FlexBuilder 分析器中获取有用的数据； 我在做这个工作。 目前，我最大的问题是：

• 我真的通过这个适度的测试突破了 Flex 的极限吗？
• 我对这个组件的处理方法是否完全错误？

我在 WinXP 上的 Firefox 下的 Flash Player 9 上运行它。

Answer 1

是的，Flex 的设计目的并不是支持大量组件，众所周知，您应该最大限度地减少组件数量，并且不要使用不需要的功能（例如，如果不需要，请使用 DisplayObject 而不是 Canvas）需要额外的功能）。

将数据与显示的对象精确镜像是不明智的。 DisplayObjects（和相关类）相对重量级，您需要控制拥有的数量。

我想说的是，您正在使用的规模（包含 1000 多个单元，并且每个单元都有一个事件侦听器）肯定会达到 Flex 的极限。

我认为你应该更好地审视你的方法和架构。 我假设您不会同时显示所有 1000 多个项目，也许您应该使用分页并在每个屏幕上显示 100 左右，并使用上一个/下一个按钮移动到另一个页面。 您还可以考虑使用自定义滚动条动态添加和删除行，模拟滚动效果。 这做起来要复杂得多。

Answer 2

天哪，看来我们可以写一本关于这个主题的书。 或者至少一章。 在开发我们的产品时，我们在这个领域学到了很多东西。

底线 - 是的，当您在屏幕上添加 1000 多个“东西”时，Flex 会减慢速度直至停止。 这里有一些要点，以及已经提到的一些内容的重复（只是为了简洁）

1）始终只绘制可见的内容。 新 Spark DataGrid 的架构师 Hans Muller 在 ViewPorts 上有一篇很棒的文章。 http://hansmuller-flex.blogspot.com /2009/06/introduction-to-viewports-and-scrolling.html。 因此，实例化足够的“单元格”来填充可见区域，并在用户滚动时基本上回收它们。

2) 回收，回收，再回收：继上面之后，当用户滚动时，您显然必须回收现在不在视图中的单元格以显示在视图中的单元格。 这里有一些我们通过艰难的方式学到的东西:-)
-> 不要处置和创建新单元格，而是使用重新父级或使用重新定位（首选重新定位）

这意味着什么：假设您有一个 10X10 网格（可见），显示 100X100 数据提供程序。当用户滚动到单元格 20X20 时，最快的方法将现有单元格的 X 和 Y 设置到新位置，然后为每个单元格调用 set data。 我们之前使用了重定父级，因为我们的场景是一系列相关的容器，因此这可能不适用于您。 但最重要的是——我们只是在可见区域周围移动“行”。 因此，创建和销毁会很慢，删除和添加到显示对象列表会更快，而仅在 (x,y) 周围移动会最快。

3) 明智地选择您继承的内容：Flex SDK 是一个野兽。 因此，明智地选择你的“细胞”基类。 例如，SDK DataGrids 有一个继承自 UITextField (Halo) 的轻量级渲染器，而不是 Label。 即使 UIComponent 在某些场景下也会很重。 查找 UIComponent 的 asdocs，看看您是否需要其中的所有内容，否则请考虑从其层次结构的更高层继承。

4) 缓存计算：在开发周期的最后进行。 完成某个功能后，运行 flex profiler。 确定运行时间最长的方法和调用次数最多的方法。 我们在发布时总是这样做，因为总是需要改进。 当您开发高度可视化的组件时，涉及大量数学知识，过多的计算会减慢速度。

5) 确保对内存进行分析：未连接的事件侦听器、恶意对象引用等会降低性能。 Flex profiler 是一个很好的工具来解决这个问题，所以一定要使用它。

我们这里有一些很好的链接：
http://www.flexicious.com/resources/Ultimate/Docs/LargeDataset.htm ？

希望这可以帮助！

Answer 3

如果您查看 Flex 框架中任何基于列表的控件，您会发现它们大量使用了可回收的项目渲染器。 因此，显示 20 行的 DataGrid 仅创建大约 22 个渲染器，并在您滚动列表时回收它们。 这就是为什么 DataGrid 可以容纳数千条记录并且仍然具有相当快的性能。 我建议您查看 Peter Ent 关于项目渲染器的系列文章，并查看 ListBase/List 和一些相关的类，以了解如何构建类似的内容：

http://weblogs.macromedia.com/pent/archives/2008/03/itemrenderers_p.html

Answer 4

没有看到你的代码，也没有确切地知道你想要做什么……看起来你确实在通过一次性将如此多的数据推送到框架中来突破 Flex 的极限。

请记住，Flash 运行时并不是为处理大型应用程序而设计的...而是在浏览器内运行一些轻型应用程序。 您的用户似乎也不太可能需要同时访问所有这些控件。

您可以尝试提供数据服务（Java、.NET 等）来驱动应用程序中的数据。 然后，您可以对数据进行分页，以便框架一次仅处理 200 - 300 多个元素。

Answer 5

在flex中，如果您使用鼠标移动事件来重绘任何内容..您可能会遇到渲染速度非常慢的情况。

例如：

this.addEventListener(MouseEvent.MOUSE_MOVE, 重画);

解决

public function redraw(anything:Object=null):void{
        //draw something here
            this.graphics.clear();
            this.graphics.lineStyle(3, 0x000000);
            this.graphics.moveTo(startPoint.x, startPoint.y);
            this.graphics.lineTo(endPoint.x, endPoint.y);
            this.scaleTextInput.x = centerPoint.x;
            this.scaleTextInput.y = centerPoint.y;

    }

上面的代码导致渲染速度非常慢...

方案：

使用 Event.ENTER_FRAME 事件代替？ 虽然比鼠标移动事件更耗费资源，但您每秒应该收到更多的更新，从而使鼠标对用户显得更加敏感：

例如：

this.addEventListener(Event.ENTER_FRAME, redraw); 而不是

this.addEventListener(MouseEvent.MOUSE_MOVE, 重画);

一切顺利。.快乐弯曲

更多信息：
http://www.deepakdhakal.com