Performance-Tuning Mobile Flex Applications

Evtim and I gave a presentation at Adobe MAX this year that discusses some simple tips for optimizing the performance of item renderers and Views in mobile Flex applications.

This session was inspired by our last talk at 360 Flex Denver. The first half is very similar, but the second half has some new content around optimizing Views and tips for taking advantage of performance optimizations coming in Flex 4.6.

Get insights from Flex SDK team members on the new mobile-optimized components. They’ll be covering Lists, itemRenderers, and View transitions. Come learn everything you’ll need to know to get your app to peak performance.

Table of contents:

  • Performance Metrics
  • General Tips
  • Item Renderers
  • Views
  • Performance Optimizations in Flex 4.6
  • Q & A

This session was recorded and is available on Adobe TV (61 minutes).

Download the slides (PPTX) (.PPTX – 4.2MB)
Download the slides (PPT) (.PPT – 7MB)

I also highly recommend watching Glenn Ruehle’s session “Best Practices for Building Flex Tablet Applications.” He discusses some key mobile features and goes over more performance tips.

Thanks to everyone who attended.

12 thoughts on “Performance-Tuning Mobile Flex Applications”

  1. I learned so much from the session vid that I doubled down and watched again the 360 video! ๐Ÿ™‚

    Thank you for them, and thanks for your blog, where I frequently found unvaluable info!

    Three quick questions:
    – If I extend IconItemRenderer or LabelItemRenderer, I don’t need to set cacheAsBitmap and OpaqueBackground right? It seems there are already set in the LabelItemRender class, but in 360 slides, Evtim set them on his IconItemRenderer example anyway…

    – If I have a group in a View that won’t move apart during the Slide transition (where I’m pretty sure it’s already cache as a BMP by the transition), using CacheAsBitmap won’t help perf because the group is never redrawn, right?

    – One area that I struggle to find advices is related to StageWebView use in Views.
    I found them a little tricky to use because of transition and the fact that when the transition start the SWV is often not loaded.
    Moreover, I don’t know if SWV has an impact in View transition and creation performance, and I should (and can) use CacheAsBitmap on it or the “freezing” method, so I you have any pointers, I will be very thankful.

    Again thanks for all your help, deeply appreciated.

    Best regards from Paris.

  2. Ho, I forgot another one (sorry): on the doc, it is said multiple time that Label is not as performant as StyleableTextField, one reason being the use of FTE in Label.

    But Label is still the recommended text component for non-editable text in mobile.

    My question is: why hadn’t Adobe provided another Label like component with StyleableTextField in its skin?
    I have an application with 5 or 6 label in each view (single-line labels). Would I gain real performance to substitute the labels with custom StyleableText based component?

  3. Also wanted to say the same, this was my favorite and most informative session at MAX

  4. @Dimitri K.
    1. As of Flex 4.5.1 cacheAsBitmap/opaqueBackground is turned on by default in LabelItemRenderer/IconItemRenderer. The reason it is shown in the 360 slides is because this wasn’t the case in Flex 4.5.0 which was the latest build available at the time of that presentation.

    2. It really depends on the situation. Sounds like you won’t benefit from cacheAsBitmap on that Group in most cases. One example where it might help would be if you are dragging a component around on top of that Group. When in doubt be sure to test. Check out Glenn’s presentation from MAX for more examples of how to use cacheAsBitmap effectively: http://tv.adobe.com/watch/max-2011-develop/best-practices-for-building-flex-tablet-applications/

    3. I doubt cacheAsBitmap will help in this situation. You might try not creating the StageWebView until after the view transition has completed (on the viewActivate event). This will avoid excess computation during the transition which can lead to poor transition frame rate. (Glenn mentions this in his presentation as well)

    4. Label and StyleableTextField actually have close performance characteristics in many situations. The place where StyleableTextField is clearly faster than Label is when you are resetting the text. Since item renderers are constantly recycled the text is reset often and so StyleableTextField is the better text component to use in that situation. If you aren’t constantly resetting the text property you’re probably fine using Label.

  5. Thanks Steve for your answers.
    Some are what I guessed, but your confirmations are invaluable.

    I agree tests are our friend, but developing for iOS devices makes tests a lot more time consuming and even somewhat more difficult to implement.

    thanks again!

  6. Very nice presentation ๐Ÿ˜‰

    Not so recently I started developing my item renderers by using ActionScript. At first it looks more a little bit tricky but in few days I realized that it’s not so difficult to create very nice renderers. I used Adobe TV tutorials by Piotr

    Steve, do you have a suggestion how to develop viewnavigators and similar containers by using ActionScript, not MXML? One of my main concerns with Flex / AIR apps are view transitions. Transitions are really slower than in native Android or iOS apps.

    ActionScript itemrenderers have excellent performance and I would be really happy if I could create views in ActionScript ๐Ÿ™‚

  7. Hello, nice work, it helps me a lot.
    But I have a question.
    What do you mean in the slide 12 with:
    Use cacheAsBitmap (carefully!)

  8. @Patri – When used correctly cacheAsBitmap can lead to increased performance, but when used incorrectly it can lead to worse performance. Knowing when/how to use it is key. See Glenn Ruehleโ€™s session linked above for more information.

Comments are closed.