使用Canvas vs VBox / HBox可以显着提高Flex 3的性能？

Question

有人告诉我，在布置儿童的位置时，使用Canvas与HBox或VBox时性能会有所提高。因此，我们的许多组件已转换为使用Canvas。但是，现在添加了一些代码，用于根据其他子元素的宽度和高度计算某些子元素的x和y位置。如果需要添加代码来确定子项的坐标/位置，是否值得使用Canvas来提高性能？是否有更好的方法或技术可以实践，而不仅仅是最小化添加的ui组件的数量并绝对指定定位？

Answer 1

如果您的布局符合某个公式，则有许多中间道路技术，其中一种是使用渲染类型的组件，例如TileGrid或ItemRenderers。如果您使用的是表单，请尝试使用Form布局组件，而不是使用自定义布局。

如果你确实需要在Flex中使用布局引擎，那么优化使用的方法是记住框架使用某些技术来增加性能负载，松散地遵循以下列表，最后一个是性能最高的：

1. 绝对定位（<Canvas>）
2. 相对定位（<VBox>）
3. 基于约束的定位（right=0）
4. 基于约束的高级定位（<constraintColumns>）

使用相对定位通常不是性能密集型的。如果您发现它是，那可能是您使用了太多嵌套容器。查看您的布局体系结构，并尝试找出对象可能被“覆盖”的方式，并简化它们。一个很好的工具是FlexSpy，它允许您在运行时内省对象布局。

另一个常见的性能瓶颈是您的应用程序试图在GUI尝试响应用户交互的同时进行一些数字运算。虽然目前还没有绿色线程框架可以让你在单独的“线程”中运行UI和逻辑，但是你可以使用一个好的架构框架，比如Cairngorm或Mate（有很多）使用Commands而不是直接的方法，所以可能占用处理周期的功能执行会等待UI完成对用户的响应。

Answer 2

在优化Flex UI时，您需要记住几件事：

1. 避免容器过度嵌套。考虑使用基于绝对或基于约束的定位的Canvas来嵌套大量HBox / VBox元素。但这并不意味着你永远不应该使用VBox / HBox。您可以混合搭配，例如使用Canvas作为主要容器，并根据需要在其中放置子盒，只是尽量避免过多嵌套。

2. 在自定义组件中正确使用UIComponent模型。特别是，使用invalidateProperties（），invalidateSize（）和invalidateDisplayList（），以便在Flash Player的最佳时间调用其伴随函数（commitProperties（），measure（）和updateDisplayList（））。 Deepa在这里给出了很好的讨论：

http://tv.adobe.com/#vi+f15384v1002

她解释了如何大量使用失效方案允许Flash Player在理想的时间执行代码，即不在屏幕更新的中间。所有Flex组件都使用这些原则，无论使用何种框架，都可以/应该利用这些原则。

Answer 3

为了确保理解：

• 您听说Canvas可以比[VH] Box
更快地定位孩子
• Canvas只进行绝对定位
• 您的组件中有一些（很多？）具有绝对位置，因此您切换到使用Canvas
• 但是您的某些组件具有相对位置，因此您需要编写代码来定位它们

这是对的吗？

无论如何，假设我是正确的（可能不是这种情况），你要做的第一件事是选择需要最少行代码的功能界面，然后决定它是否“足够好”。你想要一个代码行最少的那个，因为研究表明代码行和错误数量之间存在关联（并且你不需要bug）。你想看看它是否“足够好”，因为如果它“足够好”，你就不需要做任何事情（如果你做尝试加快速度，你就会提交{ {3}}）。

但这可能不是你想听到的：）

所以我还建议，如果你想坚持使用基于Canvas的布局，你可以尝试将所有相对定位的内容粘贴在[VH] Box中，然后绝对定位在Canvas中。 Adobe编写的代码很可能比代码更快，因此您应该尝试利用它。

但唯一可以确定的方法是尝试并对其进行分析。