2009-05-22 57 views
2

有人告诉我,在布置儿童姿势时,使用帆布与HBox或VBox相比,性能有所提高。因此,我们的许多组件已被转换为使用Canvas。然而,现在有代码被添加来计算一些基于其他孩子的宽度和高度的子元素的x和y定位。如果需要添加代码来确定孩子的坐标/位置,是否值得使用Canvas来提高性能?是否有更好的方法或技术可以实施,而不仅仅是最小化添加的UI组件的数量并明确定位?使用Canvas vs VBox/HBox显着提高Flex 3性能?

回答

4

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

如果您确实需要在Flex中使用布局引擎,那么优化您的使用的方法是记住框架在增加性能负载时使用某些技术,松散地遵循下面的列表,最后是性能最高的密集:

  1. 绝对定位(<Canvas>
  2. 相对定位(<VBox>
  3. 基于约束的定位(right=0
  4. 先进constrai基于nt的定位(<constraintColumns>

使用相对定位通常不是性能密集型。如果你发现它是这样的,那可能是你使用了太多的嵌套容器。看看你的布局架构,并试图找出你的对象可能被“过度布局”并简化它们的方式。 FlexSpy是一个很好的工具,它可以让你在运行时反思对象布局。

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

1

为了确保我的理解:

  • 你听说画布可以定位的孩子比[VH]框中
  • 帆布只做绝对定位
  • 一些(很多?)你的组件有一个更快绝对位置,所以你切换到使用帆布
  • 但是你的一些组件有一个相对位置,所以你需要编写代码来定位它们

这是正确的吗?

无论如何,假设我是正确的(可能并非如此),首先要做的是选择需要最少代码行的功能界面,然后确定它是否“足够好”。你需要最少的代码行,因为研究表明代码行数和错误数量之间存在关联(并且你不需要错误)。你想看看它是否“足够好”,因为如果它“足够好”,你不需要做任何事情(如果你尝试并加快速度,你承诺Premature Optimization)。

但是,这可能不是你想听到的:)

所以我还会有什么建议,如果你想坚持用帆布为基础的布局,你试试里面贴的所有的相对定位的内容[VH]盒子,然后绝对定位在画布内。 Adobe写的代码很可能比代码快,所以你应该尝试利用它。

但是唯一可以肯定的方法就是试试它简介

2

要牢记,同时优化一个Flex UI有两件事情:

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

  2. 在自定义组件中正确使用UIComponent模型。特别是,使用invalidateProperties(),invalidateSize()和invalidateDisplayList(),以便在Flash Player的最佳时间调用其伴随函数(commitProperties(),measure()和updateDisplayList())。迪帕给出了一个伟大的谈这个位置:

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

她解释如何使大量使用失效方式允许Flash播放器在一个理想的时间执行你的代码,即不是在中间屏幕更新。这些原则被所有的Flex组件所使用,并且可以/应该被利用,而不管所使用的框架如何。