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?

Duthie

Answer 1

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.

Belgium

What do you mean when you say you rewrite the itemRenderer to use the dataChange event instead of binding? Do you mean override the set data method and assign values there instead of assigning the values within the itemRenderers components individually? – Pilchard

@Jason Towne In the itemRenderer, add an event listener to the data change event ( help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/… ) and assign values in the event handler. It is slightly different than overriding the set data method; but the concept of of assigning vales is the same either way. It is my preference to listen for the dataChange event instead of overriding the set data method; but I have no good reason for choosing one approach over the other. – Belgium

Answer 2

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.

Trueman

Sounds good, I'm gonna switch my <s:DataGroup with ItemRenderer to a more manual approach. – Taipan

Answer 3

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. Автор, а ты русский язык знаешь? :)

Hilbert

Да народ, наши везде ;) – Episode

Answer 4

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.

Earlie