Delivering More Responsive Flex Applications

There's a post on Josh Buhler's blog about a great presentation called "Tips and Tricks for Delivering More Responsive Flex Applications" by David George of Adobe. Here are my notes from the session:

Regarding object creation, it's best to delay the creation of objects until they become visible. And, you can stagger the creation of objects to improve the perceived startup time. You can set the creationPolicy property to "queued" in order to have the contents of a container initialize over time. Be careful when using the Repeater and avoid when possible (here's how).

Regarding measurement & layout, there are costly computations involved when the Flash player has to draw the screen, which involves a Measurement Phase (traversing tree from the bottom up) and a Layout Phase (traversing the tree from the top down).

You should reduce container nesting by using HBox and VBox instead of Grid. Avoid nesting a VBox inside a Panel or Application because those containers already know how to do that. You should keep in mind that the root of an MXML component doesn't necessarily need to be a container. When you use a canvas container with constraints, it typically means a flatter and faster application. Be on the lookout for containers with only a single child.

Avoid redundant redraws by being careful not to have child object changes trigger parent redraw each time. You should delay data requests until creationComplete fires so that user is at least looking at an initialized application instead of a progress bar. Limit the geometry changes when a response arrive, and you can also stagger data requests and queue responses

If an object's properties are changed, it's bounding box is a redraw region, and all objects inside the bounding box will have to be redrawn. You can use the debug player to visualize redraws by using the "show redraw region" setting. Objects that overlap the redraw region are redrawn.

You can use the cacheAsBitmap property so that complex vector graphics is rendered into an offscreen bitmap. But, you need to be careful, especially when an object is resized often because the cache has to be stored as well. The cacheAsBitmap technique is especially useful when an alert box is going to be shown (and then when it's done being displayed). "Blitting" is the process of moving something from cache back into the object.

You can use Resize.hideChildren to hide children during state transition. "As you're animating, simplify." Avoid the mixture of device text and vector graphics (interweaved together). Place device text on top of the vector graphics (instead of interweaved in a z-order). If an effect is not rendering well, you can use Effect.suspendBackgroundProcessing to cause the effect to play first.

In order to reduce memory usage, discard unused objects by using removeChild. Remove event listeners or use weak references when calling addEventListener. You should reduce the amount of data hanging around by clearing references to unused data by setting properies to null or undefined. The memory profiling tools in the debugger are helpful to use.

When there are a large number of UI screens, load screens on an as-needed basis by loading subordinate SWFs using . You can use a runtime shared library (RSL) so that each subordinate SWF does not need to have the application model or redundant class information. More information about RSLs is available in on the Adobe site. More information about modular applications is available on Roger Gonzalez's blog (here and here). When there are large amounts of data being used in an application, implement a paging scheme.

When setting styles, changing a rule set is very expensive (i.e. setting all buttons to red) and should be avoided. The only time the setStyle() method is cheap is during object creation (before being attached to the display list). If a style needs to change at runtime, initialize it at authoring time to something so that there's a slot available for the data to be stored in. In order to change styles using inline code, you should set the property in the MXML instead of using the setStyle() method.