Making your flex apps more responsive

Most of these tips come from a MAX presentation given by David George from Adobe. His topic was "Tips and Tricks for Delivering More Responsive Flex Applications" and during the creation of Flex 1.5/2, he apparently spent quite a bit of time tuning Flex from Adobe's side of things, these tips will help you tune Flex from your side of the equation.

http://admin.adobe.acrobat.com/_a300965365/p71169528/

Deferred Creation
- Delay object creation until it's needed
- Built into the Accordion, TabNavigator and ViewStack.
- Can be subclassed, but doing it with the ViewStack is the easiest.

Ordered Creation
- For container creation, such as a panel, use 'creationPolicy="queued". This won't actually make the application load faster, but you'll be able to see certain sections of your app first and the others will show up when they are ready. This is better than waiting until the ENTIRE app is loaded, and then showing everything at one time, which occurs by default.

Use <mx:repeater> Carefully
- You're better off using a List with itemRenderer instead of using a VBox with a Repeater. This one is huge, more or less the is a no no. The repeater scolls more smoothly, so this should be the deciding factor on how you implement this.

Measurement/Layout: Definition
- #1 - Reduce container nesting
- Try to use HBox and VBox instead of a Grid
- Avoid nesting VBox inside of a Panel or Application
- The root of an XMSL component doesn't need to be a container
- * Use Canvas with constraints - Biggest increase here
- Look for containers that have one item, these are normally unnecessary
- #2 - Avoid Redundant Measurement/Layout
- Prevent numerous screen layouts when fetching images
- Get data after application has loaded from web services
- Delay requests until creationComplete
- Limit changes when responses are received
- Stagger requests or queue responses

Rendering
- Use control + e in the debugger to determine what sections of your application are being redrawn. This will help you cut down on useless processing.
- Use the cacheAsBitmap so that rendering occurs with an offscreen bitmap, this will limit the amount of redrawing that occurs.
- Another example is during a move event, the entire application could be created as a bitmap, so whatever you are dragging wouldn't force the app to constantly redraw.
- Don't use cached bitmaps when items are being resized often.
- Overall, only use cached bitmaps in particular situations where you can turn it on for a given time, and then turn it off when you're done moving objects, for examples.
- Use Resize.hideChildren when you're resizing regions.
- Filter and glow effects are very proccessing intensive, so use slowly.

Reducing Memory Usage
- Discard usused UI items. for example, use 'removeChild()' or 'removeEventListener()' when they are no longer needed. Event listeners can be very costly when not removed.
- Clear references to unused data such as 'myProperty = null;' or 'myWebService.blah.clearResult();'.

Setting Styles
- Changing a rule set is most expensive, such as StyleManager.styles.Button.setStyle('...').
- For inline styles, setStyle can be expensive if there are a lot of children.
- If a value will change at runtime, create a style for the button and make sure any buttons necessary are already listening for that style. You could also explititly set color information for any objects that will need to change.

URLs
DevNet Articles
- http://www.adobe.com/devnet/flex/deployment.html
Large Number of UI screens:
- http://livedocs.macromedia.com/flex/2/docs/00001523.html
- http://blogs.adobe.com/rgonzalez
Large amounts of data:
- http://weblogs.macromedia.com/mchotin