[flex] Quotes from tips for performance

1. Architecting Flex Applications That Perform Well

1) Use the Flex navigator containers (Accordion, TabNavigator, and ViewStack). Flex navigator containers help control the creation of child views with deferred instantiation.

2) Dashboard-style. This type of application organizes content into modular, self-contained views. This approach performs well because it organizes complex views, with Flex creating them when the user drills down.

2. Using Layouts, Hierarchy, and Containment Properly

The biggest Flex performance danger is yielding to the temptation to use containers randomly. Principle: Avoid unnecessary container nesting.

1) Avoid Nesting Containers Many Levels Deep

Below are an example of deeply nested code:

<mx:VBox>
  <mx:HBox>
    <mx:Form>
      <mx:FormItem>
       .....
       ...
      </mx:FormItem>
    </mx:Form>
  </mx:HBox>
</mx:VBox>

Typically, nesting fewer containers provides good results with respect to creation time.

2) Absolute Positioning and Sizing

The calculations to decipher how big each container and its children are, as well as where to place them, can potentially be resource-intensive. Here are two tips that can help reduce these calculations:

i.  Hard-code object positions

Absolute positioning does not work well if you want your application to resize when the browser window resizes. Using the Canvas container to create faster layouts should be a last-resort solution.

ii. Hard-code object widths and heights

This technique works with any container or control.

3) Use Grid Containers Wisely

You should only use a Grid container when your controls must line up both horizontally and vertically.

Some common misuses of Grid containers include the following:

a) Using the Grid container when you want to left-justify or right-justify controls in the same container (see Figure 3). Developers often try to do this using the following code:

<mx:Grid borderStyle="solid" width="400">
 <mx:GridRow>
  <mx:GridItem horizontalAlign="left">
   <mx:Button label="left" />
  </mx:GridItem>
  <mx:GridItem horizontalAlign="right">
   <mx:Button label="right" />
  </mx:GridItem>
 </mx:GridRow>
</mx:Grid>

However, using an HBox container with a Spacer object to fill unwanted space works the exact same way, as shown in the following snippet:

<mx:HBox borderStyle="solid" width="400">
  <mx:Button label="left" />
  <mx:Spacer width="100%" />
  <mx:Button label="right" />
</mx:HBox>

b) Using a Grid container as a child of a Repeater object when alternate mechanisms would work better. Alternatively, you can achieve it with a List control and a custom cell renderer.

3. Examples of Common Container Redundancies to Avoid

1) The VBox container inside an <mx:Panel> tag

A Panel container is a VBox container other Panel styles. For example, instead of writing this:

<mx:Panel title="Grocery List" width="150" height="150">
    <mx:VBox>  
        <mx:Label text="Fruits" />
        <mx:Label text="Veggies" />
        <mx:Label text="Cookies" />
    </mx:VBox>
</mx:Panel>

Use this code instead:

<mx:Panel title="Grocery List" width="150" height="150">
    <mx:Label text="Fruits" />
    <mx:Label text="Veggies" />
    <mx:Label text="Cookies" />
</mx:Panel>

2) VBox container inside an <mx:Application> tag

An Application object is inherently a VBox container layout.

3) Containers as top-level tags for MXML components

You do not need to use a container tag as the top-level tag of your MXML component definition. It is perfectly valid for an MXML component to be a simple control, like:

<mx:Image xmlns:mx=http://www.macromedia.com/2003/mxml source="@embed('foo.jpg')" width="200" height="200" />

4) Container wrappers for an MXML component instance

There is no need to wrap a container around an MXML component tag.

<mx:VBox backgroundColor=" #FFCCCC" borderStyle=" solid"> 
    <myComponent xmlns=" *" />
</mx:VBox>

can be changed to:

<myComponent xmlns=" *" backgroundColor=" #FFCCCC" borderStyle=" solid" />

5) Re-evaluate your container choices

4. Using Deferred Instantiation to Improve Perceived Performance

Containers have a creationPolicy property that you set to specify when Flex should create the container (at startup, incrementally, when a user navigates to that container, or based on other user action).

The following list explains what each creationPolicy property does when set on Flex navigator containers:

1) creationPolicy="auto"

on navigator containers: it loads quickly, but users experience a brief pause the first time they navigate from one view to another.
on non-navigator containers: must add extra code to specify when to create the container's children.

2) creationPolicy="all"

When Flex creates the navigator containers, it creates all of the controls in all their child views.

3) creationPolicy="none"

You explicitly instantiate views with the createComponents() method. Flex doesn't instantiate for you.

4) creationPolicy="queued"

Flex creates all containers and then creates the children of the queued containers in the order in which they appear in the application unless you specify a creationIndex property.

Progressive Layout—Queued Creation of Components

Progressive layout is similar to the way HTML applications load content in succession in a client.

More detailed info can be found here.

5. Handling Large Data Sets

Paging and sorting can be incorporated to handle large data sets.

6. Playing Complex Effects Smoothly

to be continued

7. Achieving Great Performance with Runtime Styles

to be continued

8. Improving a Repeater Object's Performance

to be continued

9. Performance Tuning and Profiling Your Own Flex Application

1) Use RSLs

2) Use the actionscript profiler

3) Calculate the intialization time

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" creationComplete="doLater(this,'doneNow')">
<mx:Script><![CDATA[
var dp = [{food:"apple", type:"fruit", color:"red"}, {food:"potato", type:"vegetable", color:"brown"}, {food:"pear", type:"fruit", color:"green"},
	{food:"orange", type:"fruit", color:"orange"},{food:"spinach", type:"vegetable", color:"green"},{food:"beet", type:"vegetable", color:"red"}];
function doneNow()
{
	doLater(this, "reallyDoneNow");
}
function reallyDoneNow()
{
	timerLabel.text += getTimer() + " ms"
}
]]></mx:Script>
<mx:Form>
	<mx:FormHeading label="Sample Form" />
	<mx:FormItem label="List Control">
		<mx:List dataProvider="{dp}" labelField="food"/>
	</mx:FormItem>
	<mx:FormItem label="DataGrid control">
		<mx:DataGrid width="200" dataProvider="{dp}"/>
	</mx:FormItem>
	<mx:FormItem label="Date controls">
		<mx:DateChooser />
		<mx:DateField />
	</mx:FormItem>
	<mx:FormItem label="Load Time">
		<mx:Label id="timerLabel" fontSize="12" fontWeight="bold" text="The application initialized in "/>
	</mx:FormItem>
</mx:Form>
</mx:Application>

4) Use getTimer() to time component and data gestures

Check out this blog entry.


Original Artical