Improving initial layout performance

Every container has a creationPolicy property that determines how the container decides which of its descendants, if any, to create when the container is created. Flex uses this property to determine when components are created when an application starts.

You can instruct Flex to create all components in all containers, only the initially-visible components in the containers, or no components in any of the containers. In addition, you can define the order in which Flex creates containers and their components.

By using the creationPolicy property, you can decide at what stages the user incurs the costs of creating components. For more information, see Improving Startup Performance in Developing Flex Applications.

Nesting containers

Application start-up time slows commensurate with the complexity of the layout of your Flex application. Excessive levels of nested containers can contribute to this complexity, and should be avoided if you can accomplish the same layout with fewer levels of nesting. Try using margin, gap, and alignment properties and the Spacer control, to achieve the desired layout.

When you have a working skeleton of your application, consider the containers that you are using to determine if you could use alternate containers with less nesting. For example, consider the following layout:

<mx:Grid>
   mx:GridRow>
      <mx:GridItem>
         <mx:Button label="Visa"/>
      </mx:GridItem>
      <mx:GridItem>
         <mx:Button label="MasterCard"/>
      </mx:GridItem>
      <mx:GridItem>
         <mx:Button label="Diner's Club"/>
      </mx:GridItem>
      <mx:GridItem>
         <mx:Button label="AmEx"/>
      </mx:GridItem>
   </mx:GridRow>
</mx:Grid>

You could replace the previous layout with the following layout to achieve the same effect:

<mx:VBox>
   <mx:Button label="Visa"/>
   <mx:Button label="MasterCard"/>
   <mx:Button label="Diner's Club"/>
   <mx:Button label="AmEx"/>
</mx:VBox>

Improving effect performance

If animations in an application do not play smoothly, background processing might be interfering with the animation. Effects have a public property called suspendBackgroundProcessing. When this property is true, it blocks all background processing while the effect is playing, including measurement and layout and data service response. The default value is false. You should be careful when you set this property to true because it makes an effect completely uninterruptible while playing.

Large-scale transition effects applied to complex views can affect how quickly the player can redraw the view. When this happens, you will notice the effect does not play smoothly. The following tips describe ways to modify an application to make effects play more evenly:

• Increase the duration of an effect to spread out the distinct, jerky stages over a longer period of time, which allows the eye to fill in the differences.
• Hide part of the application that is playing an effect to make the effect play more smoothly, because there is less for Flash Player to redraw. To do this, you use the effectStart and effectEnd events to control what is visible before and after the effect. For example, if you apply a Fade effect to a Form with many controls, you can use the effectStart event to make some of the less important controls invisible, have the Form container play the Fade effect, and then use the effectEnd event to make the controls visible again.
• Use a solid backgroundColor to improve an effect's performance. If you want a slight gradient instead of a solid color, use a backgroundImage that is a SWF file or an SVG file instead of a bitmap image. Using bitmap images in backgrounds can slow down effects. Designers often give their views a backgroundImage that is a solid colors with gradients or patterns.

Using a wait state animation

When the child containers of navigator containers are heavily populated, users experience a wait period when they navigate to a new view. You can create an animation to indicate this fact. The extras directory of the flex.war file includes a sample application with a TabNavigator container that displays a precompiled SWF animation during wait states. View the source of the app.mxml file in the extras/NavigatorWaitState directory of your Flex installation to see how the TabNavigator container catches the change event and displays the embedded SWF file as a wait symbol. When the child views broadcast their draw events, indicating they have finished drawing their contents, the TabNavigator container destroys the wait symbol.

Displaying multiple pop-up windows

Having more then six heavily populated pop-up windows open at the same time in a Flex application can affect performance. The performance of Flash Player is limited by how quickly it can redraw obscured windows. This is even more of an issue if each window has a complex hierarchy of components within it. The more components that are obscured, the longer it takes the player to redraw.

One possible way to work around this is to use Navigator containers to organize your pop-up content so that it is spread out over multiple child views; for more information, see Using Navigator Containers in Developing Flex Applications. You can also organize multiple pop-up windows in a dashboard application using Panel containers; for more information about Panel containers, see Using Layout Containers in Developing Flex Applications.

Using Flash Debug Player

Using Flash Debug Player can potentially slow an application. As Flash Debug Player processes the application, it simultaneously writes out trace statements and warnings. If your application runs quickly in Flash Debug Player, it will run as fast or faster in the standard Flash Player.

You can have both the Flash Debug Player and the standard Flash Player installed on your system. Use query parameters and settings in the flex-config.xml file to control which player Flex uses to execute your application. Ensure that you use the standard Flash Player during performance testing. For more information, see Debugging Flex Applications in Developing Flex Applications.

Version 1.5

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00000082.htm

Add Comment