降低显示列表上的复杂性来提高性能

增加Flash应用 程序 性能的一种最简单方法是，移除显示列表中所有的隐藏对象，同时使用最少数量的显示对象。 代码 将 通过遍历整个显示列表来执行，即从显示列表最上层（舞台），到主应用程序类。 Flash Player执行代码，并从上到下重绘显示列表中的所有的孩子，直到到达显示对象。 容器可以使任何继承自DisplayObjectContainer的类，如UIComponent，Group或者Sprite。

下载 (19.12 KB)

昨天 23:26

尤其是在MXML 中，很容易就嵌套了显示对象，但是每次嵌套对象时都是非常耗性能的，因为每个添加到现实对象列表的对象都继承了一个类，这个类又继承另一个，如此等等。 为了理解为什么嵌套是高消耗的， 让我们看一下显示列表类的层次结构。

下载 (50.05 KB)

昨天 23:26

AS3

当谈到显示列表，对于AS3来说，所有的显示对象过去曾经是MovieClip 。 在Flash Pro中早期的Flash版本（AS1和AS2）中，MovieClip类都是动画 的核心类。 每一个MovieClip符号包含了显示对象的行为和功能，以及操作时间轴的附加属性 。 许多时候你并不需要多余的图层以及时间轴的开销，而事实上AS3提供了一种能的对象叫做DisplayObject。 DisplayObject是低层的为那些能够被添加到显示列表的所有对象的基类，它继承了EventDispatcher（它是基于对象的）。 它包括一些类来帮助管理对象（如cacheASBitmap ） 和可视属性。 显示对象容器是一种这样的对象，在它们里面可以包含子对象（这些子对象是显示对象）。 DisplayObjectContainer包含了一些方法，来管理它们的孩子对象，例如AddChild（向容器中添加对 象），numChildren（容器所包含的孩子对象的个数）和removeChild（移除子对象）。

有些时候，你需要显示图形但又不需要时间轴。 这时你需要使用Sprite，它继承自DisplayObjectContainer类。 一般原则，你最好使用Bitmap，Shape和Sprite类或者它们的子类，而不要选择MovieClip。

Flex3

下面是最小化的Flex。 Flex对于显示对象的核心类是FlexSprite，除了能够返回一个字符串表示这个对象的位置外，和Sprite没什么两样。 接下来是UIComponent，它继承了FlexSprite，也是Flex3中每个可视组件 的基类。 UIComponent包括了键盘和鼠标 交互，同时也允许在不需要的时候关闭这些交互，例如label。 它也包含了许多特征，例如accessibility（可访问性），Style（样式），State（状态），Invalidation和Validation（合法性），DataBinding（数据 绑定），Effect（效果 ），嵌入字体等等。

Flex4

下面是Flex4. Flex4使用Group作为Spark （相当于MX中的UIComponent）中可视元素的容器基类。然后你可以使用一系列的组件，如Skin,Graphic,HGroup和VGroup。

除了Group之外，也可以使用SkinnableComponent，它是所有Spark组件的超类，它为skinnable组件定义了基类。 使用SkinnableComponent类的皮肤是Skin类的典型子类。

以Spark按钮 为 例。 ButtonBase类是所有Spark按钮组件的基类。 Button和ToggleButtonBase是ButtonBase的子类。 同样，诸如CheckBox和RadioButton类是ToggleButtonBase的子类。 按钮组件继承了ButtonBase，同时使用了默认皮肤，包含了一个文本label。 你可以自定义皮肤类来添加图像到控制或其他任何你需要的东西。 默认按钮皮肤是spark.skins.spark.ButtonSkin，它继承自Skin。 最后提到的是Spark中的组件，它们很容易改变，但是也非常重要。

下面做一些测试。 关于显示对象的内存使用情况

1. Shape: 224 bytes
   
2. 
   
3. Sprite: 392 bytes
   
4. 
   
5. MovieClip: 428 bytes
   
6. 
   
7. UIComponent: 1036 bytes
   
8. 
   
9. Group: 1200 bytes

复制代码

下面，看一下Flash Player代码在帧上的执行时间。 建议使用“我”前几天开发 的FrameStats工具 。 所做的工作是创建一个快速测试，然后添加方法到
FrameStats 工具 它允许你查看在一帧或几帧上代码执行时间（毫秒单位）的信息。 我将把帧率设为1秒（这样测试的更清楚，也便于观察结果），然后调用一个将被添加到显示对象的方法，添加显示对象到显示列表。 然后可以在控制台里跟踪帧的生命周期。

1. 
   
2. protected function creationCompleteHandler():void
   
3. frameStats = new FrameStats(FlexGlobals.topLevelApplication, false );
   
4. frameRateControl = new FrameRateControl( FlexGlobals.topLevelApplication, false, false, 1, 1);
   
5. var componenent:UIComponent = new UIComponent();
   
6. componenent.addChild( frameStats );
   
7. frameStatsHolder.addElement( componenent );
   
8. trace( "Sprite: " + getSize(new Group()) );
   
9. uicom.addChild( sprite );
   
10. frameStats.testingExecutionTimeOfMethod( methodToTest, 10000 );
    
11. private function methodToTest():void
    
12. sprite.addChild( new Group() );
    
13. </fx:Script>
    
14. <s:Group id="frameStatsHolder" />
    
15. <mx:UIComponent id="uicom" />

复制代码

显示对象

当添加10000个显示对象是，对于主要基类构造器的代码执行以及子类情况如下：

1. 
   
2. Shape
   
3. 
   
4. Constructor code of children executed: 276
   
5. 
   
6. Sprite
   
7. 
   
8. Constructor code of children executed: 399
   
9. 
   
10. UIComponent
    
11. 
    
12. Constructor code of children executed: 1078
    
13. 
    
14. Group
    
15. 
    
16. Constructor code of children executed: 1195

复制代码

正如所料，构造器代码和每个构造器的执行在拥有较多嵌套对象时，将花费更长时间。 如果你知道Flash Player经常将构造器方法放到自身代码的概念，这是有益的，因此在构造器上的执行时间会比其他类更长，我们应该尽量减少构造函数中的代码。

添加1000个显示对象
按钮：
虽然我添加了10000个SimpleButton的显示对象，Player在帧率为1fps时也只用了33毫秒，原因是SimpleButton在显示 对象树的层次上比较靠上，所以是较少的嵌套结构。 SparkButton在构造器代码上执行时间要比Halo更长，但有趣的是，SpariButton对于显示列表的渲染时间要短一些。

1. 
   
2. SimpleButton
   
3. 
   
4. Constructor code of children executed: 33
   
5. 
   
6. Final user code executed: 730
   
7. 
   
8. Player renders changes display list: 304
   
9. 
   
10. mx.Button
    
11. 
    
12. Constructor code of children executed: 820
    
13. 
    
14. Player renders changes display list: 7075
    
15. 
    
16. s:Button
    
17. 
    
18. Constructor code of children executed: 2392
    
19. 
    
20. Player renders changes display list: 4539

复制代码

Text

添加文本的结果也非常有趣。 Spark Label在渲染的时间上做的还不错，但是在构造函数的执行时间上还是不如Halo组件。 TLF在渲染上做的很差，但是构造器时间上非常好。

1. 
   
2. TextField
   
3. 
   
4. Constructor code of children executed: 68
   
5. 
   
6. Player renders changes display list: 168
   
7. 
   
8. mx:Text
   
9. 
   
10. Constructor code of children executed: 743
    
11. 
    
12. Player renders changes display list: 685
    
13. 
    
14. S:Label
    
15. 
    
16. Constructor code of children executed: 1136
    
17. 
    
18. Player renders changes display list: 198
    
19. 
    
20. s:RichText
    
21. 
    
22. Constructor code of children executed: 416
    
23. 
    
24. Player renders changes display list: 3224

复制代码

结论

--使用低层次（即位于结构树的靠近根的位置）的类，例如TextField，SimpleButton（如果可能的话），而不是Halo和Spark 它可能需要更多的代码，但是将提高性能。
--避免使用TLF
--使用Halo组件而不是Spark组件
--自定义组件时，Sprit > MovieClip & UIComponent > Group
--在创建矢量图形是，建议使用Shape显示对象