关于FLex性能的测试总结

     前两天，本来老大想我测下Flex的性能，后来因为另一个同事不知道开发组件，所以我的任务就交换了下，下班回到家，没事的时候，自己也试着做了些测试，现把测试结果总结下：

    首先，先了解下FLex Application的运行周期，Flex Application的运行顺序主要为：preloader->systemManager->FlexApplication started… 然后依次是preinitialize：在所有的初始化之前触发,没有子组件的定义,但是可以引用组件的变量;->initialize:当所有子组件生成完成后触发,在这个时间点还没有组件被渲染出来;creationComplete:组件定义完成并已经在显示列表.applicationComplete:所有的组件初始化完成并显示.
       我们在编写Flex应用程序时，我们通常是以<mx:Application>标签作为开头，实际上，Flex应用程序在启动运行的时候并不是直接从Application开始运行，在这之前还有一部分悄悄的先运行了，正如大家所看到的，当我们运行编写好的Flex应用程序时，尽管我们没有编写任何与启动进度载入条相关的代码，但无一例外的，应用程序均会为我们自动加上这一部分。因此才有我们看到的标准的Flex loading载入条。　
　　通常我们所说的Flex应用程序，本质上来说是基于Flex框架、采用ActionScript 3.0编写的Flash应用程序，从这一点来说，它和普通的Flash应用程序没有任何差别。相对来说，传统的使用Flash IDE（如Flash CS3）创建Flash程序时更多的基于“时间线”（Timeline）及“帧”（Frame）的概念，更易于设计师理解；而基于Flex框架来创建的 Flash应用程序更多是强调程序性，很少提及“时间线”与“帧”的概念，更易于程序员理解。其实Flex应用程序一样也有时间线，只是这部分由Flex 框架隐藏起来了，通常不为大家所熟悉，在默认创建Flex程序时，这一切Flex已帮我们完成了，但了解这部分内容更有助于大家对Flex应用程序的启动有更深刻的认识，以便能对程序更灵活的控制与发挥~~
　　实际上，Flex应用程序共由两帧组成，第1帧为preloader部分，第2帧为主应用程序部分，此两部分由Flex应用程序的根 SystemManager统管，SystemManager是flash.display.MovieClip的子类，影片剪辑（movie clip）支持帧。由于swf属于一种渐进式（progressive）下载的格式，正是由于swf格式这个特性，Flash Player并不需要等待整个程序下载完成便可直接访问已载入帧的内容，因此第一帧通常用来作为应用程序载入时的loading画面显示，一般来说，第一帧包含的内容应该尽可能的少（在第一帧中尽量不要含有Flex框架的组件），以便能很快的下载并立即显示；第二帧才是主应用程序真正的内容，一旦 SystemManager实例进入到第二帧后，即开始内部主应用程序运行的生命周期（life cycle），也就是进入我们最为熟悉的<mx:Application>运行的部分（SystemManger实例有一 application的属性，在第1帧时，此属性为null，当进入到第2帧时，该属性才指向真正的主程序application实例）记住我们开始所说的，Flex应用程序总的来说是以事件驱动的程序。
    在程序进入第2帧，主程序application开始运行后，便会相应的触发相应的一系列事件，按事件发生的先后顺序依次来介绍：
preinitialize：应用程序application已实例化，但此时还未创建任何相关的孩子组件（child component）
initialize：此时，创建了相应的孩子组件，但还未对这些子组件进行布局
creationComplete：应用程序application完成全部实例化，并完成所有子组件的布局
apllicationComplete：所有的组件初始化完成并显示.
　　上面三处事件的完成，表明application内部启动的整个进程完成，接下来便会通知SystemManager派发applicationComplete事件。此时，启动程序启动完成并准备运行。
　   Flash包含的是一个时间线上的多个帧, 而Flex的SWF只包含2个帧. SystemManager, Preloader, DownloadProgressBar和少量工具类都在第一帧, 剩下的包括应用代码/ 内嵌资源全都在第二帧中. 当Flash Player下载下载SWF时, 只要接收到第一帧内足够的数据, 就会实例化SystemManager, 由它来创建Preloader, 然后创建DownloadProgressBar, 这两个对象会察看剩余字节的传输过程. 当第一帧的所有字节传输完毕后, SystemManager发送enterFrame到第二帧, 然后是其他事件. 最后Application对象派发applicationComplete事件.
　    SystemManager是Flex应用的主控者, 它控制着应用窗口, Application实例, 弹出窗口, cursors, 并管理着ApplicationDomain中的类. SystemManager是FlashPlayer实例化的第一个类, 它存储了主应用窗口的大小和位置信息, 保存其子组件比如:浮动弹出窗口和模态窗口的痕迹. 通过SystemManager可以获得内嵌字体,样式和document对象.
自定义的可视化组件(UIComponent的子类)只有在调用过addChild()后, 才会有一个SystemManager赋给他们, 之前是Null. 所以在自定义可视化组件的构造函数中不要使用SystemManager.
通常, Application对象创建时, 发生如下事件:
1. 实例化Application对象
2. 初始化Application.systemManager
3. Application在初始化过程之前, 派发预初始化事件.
4. 调用createChild(). 此时, 所有应用组件被创建, 所有组件的createChild()被调用.
5. Application派发初始化事件, 表明所有的组件初始化完毕.
6. 派发creationComplete事件
7. Application对象添加到显示列表中
8. 派发applicationComplete事件
    大多数情况下, 我们使用<mx:Application>来创建application对象, 但如果使用ActionScript来创建的话, 那么建议不要在application的构造函数中创建组件, 推荐在crateChildren函数中, 主要是从性能方面考虑.
    Flex 是一个事件驱动的编程模型, 任何事情的发生, 其背后必然存在一个事件. 而开发者第一次看到MXML时, 很难体会到一个Xml标记的应用的事件流和实例化的生命周期. 这个对于HTML和Flash的开发者尤其会感到困惑, 因为其熟悉的方式与Flex的一点也不相似. HTML的实例化是从上到下的, Flash的执行是从Frame0开始一帧帧运行的. 而Flex则又有不同.

下面就是写的一个测试用例：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#67cbff, #fcffff]" color="#000000" fontSize="12" preinitialize="report(event,'preinitialize')" initialize="report(event,'initialize')" creationComplete="report(event,'creationComplete')" applicationComplete="report(event,'applicationComplete')" > <mx:Script> <!--[CDATA[ [Bindable] public var outTextData:String=""; public function report( event:Event , value:String ):void { outTextData += String( flash.utils.getTimer() ) + 'ms >> ' + event.currentTarget + '.' + value + '/n'; } ]]--> </mx:Script> <mx:TextArea id="outTextArea" text="{ outTextData }" right="10" left="10" top="50" bottom="10" alpha="0.5" wordWrap="false" initialize="report( event , 'initialize' )" creationComplete="report( event , 'creationComplete' )" /> <mx:Button y="10" height="30" left="168" width="150" id="HelloButton" label="Say Hello" initialize="report( event , 'initialize' )" creationComplete="report( event , 'creationComplete' )" rollOver="report( event , 'rollOver' )" rollOut="report( event , 'rollOut' )" click="report( event , 'click > Hello!' )" /> <mx:Button id="GoodByeButton" label="Say Goodbye" y="10" left="10" height="30" width="150" color="#000000" initialize="report( event , 'initialize' )" creationComplete="report( event , 'creationComplete' )" click="report( event , 'click > Goodbye!' )" /> <mx:Button id="ClearButton" label="Clear" y="10" left="326" height="30" color="#000000" right="10" initialize="report( event , 'initialize' )" creationComplete="report( event , 'creationComplete' )" click="outTextData='';report( event , 'click' )" /> </mx:Application>

执行效果如下：

1059ms >> performance0.preinitialize 1132ms >> performance0.outTextArea.initialize 1154ms >> performance0.HelloButton.initialize 1163ms >> performance0.GoodByeButton.initialize 1167ms >> performance0.ClearButton.initialize 1167ms >> performance0.initialize 1427ms >> performance0.outTextArea.creationComplete 1428ms >> performance0.HelloButton.creationComplete 1428ms >> performance0.GoodByeButton.creationComplete 1428ms >> performance0.ClearButton.creationComplete 1429ms >> performance0.creationComplete 1444ms >> performance0.applicationComplete

下面对FLex的容器嵌套也做了些测试：

容器之间没嵌套的情况：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#67cbff, #fcffff]" color="#000000" fontSize="12" preinitialize="report(event,'preinitialize')" initialize="report(event,'initialize')" creationComplete="report(event,'creationComplete')" applicationComplete="report(event,'applicationComplete')" > <mx:Script> <!--[CDATA[ [Bindable] public var outTextData:String=""; public function report( event:Event , value:String ):void { outTextData += String( flash.utils.getTimer() ) + 'ms >> ' + event.currentTarget + '.' + value + '/n'; } ]]--> </mx:Script> <mx:TextArea id="outTextArea" text="{ outTextData }" right="10" left="10" top="50" bottom="10" alpha="0.5" wordWrap="false"/> <mx:HBox/> <mx:HBox/> <mx:HBox/> <mx:HBox/> <mx:HBox/> </mx:Application>

测试结果如下：

1252ms >> PerformanceTest1_0.preinitialize 1349ms >> PerformanceTest1_0.initialize 2114ms >> PerformanceTest1_0.creationComplete 2127ms >> PerformanceTest1_0.applicationComplete

容器之间嵌套的情况：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#67cbff, #fcffff]" color="#000000" fontSize="12" preinitialize="report(event,'preinitialize')" initialize="report(event,'initialize')" creationComplete="report(event,'creationComplete')" applicationComplete="report(event,'applicationComplete')" > <mx:Script> <!--[CDATA[ [Bindable] public var outTextData:String=""; public function report( event:Event , value:String ):void { outTextData += String( flash.utils.getTimer() ) + 'ms >> ' + event.currentTarget + '.' + value + '/n'; } ]]--> </mx:Script> <mx:TextArea id="outTextArea" text="{ outTextData }" right="10" left="10" top="50" bottom="10" alpha="0.5" wordWrap="false"/> <mx:HBox> <mx:HBox> <mx:HBox> <mx:HBox> <mx:HBox/> </mx:HBox> </mx:HBox> </mx:HBox> </mx:HBox> </mx:Application> 
 测试结果如下：

827ms >> PerformanceTest1_0.preinitialize 865ms >> PerformanceTest1_0.initialize 1097ms >> PerformanceTest1_0.creationComplete 1103ms >> PerformanceTest1_0.applicationComplete

可见，容器并排比嵌套执行效率要慢的多。