Performance Tips for Adobe Flex Mobile Apps

I just attended a session at Adobe Max given by Evtim Georgiev and Steve Shongrunden on performance tuning mobile Flex apps. Since I'm a performance geek, I thought I'd post the tips here

How to optimize your mobile view rendering


1.Avoid heavy components
2.Defer object creation (lazy)
3.Use BitmapImage instead of Image
4.Use Group (with a Rectangle) instead of BorderContainer
5.Reduce nested Groups
6.Use mobile optimized component skins
7.Use ConstraintLayout instead of nested VGroup and HGroup
How to increase your Frames Rates


1.Use cacheAsBitmap on images that don't change often but redraw often
2.Avoid a lot of nested containers
3.Use ContentCache class for caching server side data - cache on by default, queue off by default
4.Use PNG for all images (much faster than jpg/gif)
5.Use Label over RichText over RichEditableText (Label is a LOT faster than the other two)
6.StyleableTextField (turn off edit and selection if not needed) - This is used by LabelItemRenderer and IconItemRenderer (can't use directly in MXML)
7.StyleableStageText - new in 4.6. Use this very responsive editing and scrolling (used by mobile TextINput andTextArea (can't use directly in MXML)
8.Create ItemRenderes in MXML. Use mobile-optimized IconItemRendererand LabelItemRenderer
9.Avoid creating heavy ItemRenderers (don't use heavy (text) components. Turn off autoDrawBackground if not needed. Avoid Filters/drop shadows.
10.Avoid complex binding expressions (i.e. on scrollable content)
11.Reduce nested Groups

Some other tidbits: Why are Adobe mobile optimized components better?

•Use StylableTextField (lightweight layout)
•More sophisticated ContentCache
•Their configurable (use styles for properties)

What's coming in Flex 4.6?

•On demand scrollbars (created when touch interaction starts) - up to 15% faster for list based views
•ItemRendererFunction recycles, so now it's mobile friendly
•32-bit rendering in Android available, but 16-bit rendering is faster