Flex performance considerations

Question

What are the main key-points a Flex developer should remember in order to improve performance of Flex applications? The ones which come to my mind are:

1. extending ItemRenderers from more lightweight base classes: i.e. UIComponent
2. using suspendBackgroundProcessing set to true for animations
3. using ArrayLists instead of ArrayCollections where appropriate.
4. useVirtualLayout in Spark DataGroups (unfortunately this step requires Scrollers to make this advice effective)
5. SQLight performance optimizations for AIR apps (transactions etc)
6. Probably splitting long data processing into different frames? (Never done this though, so I might be mistaken)

What are the key guidelines you try to follow while developing your Flex3/Flex4/AIR applications in order to increase their performance?

Answer 1

My list:

• use local vars instead of global as much as possible
• ActionScript instead of MXML as much as possible
• [Bindable] generates tons of code, try to avoid it

P.S. Автор, а ты русский язык знаешь? :)

Answer 2

The main things I consider, in order of importance:

1. Binding

   • Creates a lot of extra code, and can cause a serious degradation in performance when bindings are not removed. For example, if you reuse components in an applications, listening functions are active throughout the entire flow of your application, consuming unnecessary memory and CPU cycles. For larger applications consider the BindingUtils class.

   • Note that you cannot unbind properties bound with curly braces {myVariable}

2. Validate (invalidate) calls are some of the most expensive calls in Flex. Be careful when using them.

   validateNow();

3. Understand the Flex component lifecycle. Overriding these methods can streamline the instantiation process.

4. Use Vector objects. More information.

5. Ints > Numbers. Excellent SO answer.

Some more basic tips:

1. Do not use expensive operations in loops.

   for(var i:int = 0; i < massiveArray.length; i++)
   

   In the case of massiveArray, a very large array, length() might be an expensive operation. Assign var massiveArrayLength:int = massiveArray.length; to improve performance.

2. http://jacksondunstan.com/ has a wealth of articles on optimizing your code. The man is a genius.

3. Avoid creating unnecessary variables, as instantiation is expensive. Always reuse variables if possible.

   function getComplexValue():int {
       var i:int = complexCalculation(); // returns int after calculating
       return i;
   }
   

   Instead, just return immediately.

   function getComplexValue():int {
       return complexCalculation();
   }
   

4. If you have access to it, the Flash Profile perspective is your friend. It's a powerful profiler that can reduce the time involved in optimizing a codebase.

Answer 3

It seems to me a lot of people have performance issues w/ itemRenderers. So, my one contribution here to never use binding an itemRenderer. I fix a lot of customer "memory leak" bugs just by rewriting their itemRenderers to use the dataChange event instead of binding.

Beyond that, I second @Wade Mueller's comment about avoiding nested containers as much as possible.

Answer 4

Although this is less important with the lighter weight Spark Groups, I always try to keep the number of nested containers to a minimum and set explicit positions/sizes when possible. Complicated UIs with dynamically sized containers nested within one another cause a ton of (usually unnecessary) measuring to have to occur. This often results in huge lags when switching between views.