Accessibility

Flex Article

 

Flex Application Performance: Tips and Techniques for Improving Client Application Performance


Table of Contents

  1. Introduction
  2. Architecting Flex Applications That Perform Well
  3. A Note About Flash Players
  4. Using Layouts, Hierarchy, and Containment Properly
  5. Examples of Common Container Redundancies to Avoid
  6. Using Deferred Instantiation to Improve Perceived Performance
  7. Handling Large Data Sets
  8. Playing Complex Effects Smoothly
  9. Achieving Great Performance with Runtime Styles
  10. Using Dynamically Repeating Controls for Better Performance
  11. Improving a Repeater Object's Performance
  12. Improving Performance of Charting Components
  13. Performance Tuning and Profiling Your Own Flex Application
  14. Using Runtime Shared Libraries (RSLs)
  15. Feedback and Support
Comments

Achieving Great Performance with Runtime Styles

Runtime cascading styles are very powerful, but you should use them sparingly and in the correct context. Dynamically setting styles on an instance of an object means calling UIObject's setStyle() method. The setStyle() method is one of the most expensive calls in the Flex application model framework, because the call requires notifying all the children of the newly styled object to do another style lookup. The resulting tree of children that must be notified can be quite large.

A common mistake that impacts performance is overusing or unnecessarily using the setStyle() method. In general, you only need the setStyle() method when you want to change styles on existing objects. Do not use it when setting up styles for an object for the first time. Instead, set styles in an <mx:Style> block, as explicit style properties on the MXML tag, through an external CSS style sheet, or as global styles. It is important to initialize your objects with the correct style information, if you do not expect these styles to change while your program executes (whether it is your application, a new view in a navigator container, or a dynamically created component).

Some applications need to call the setStyle() method during the application or object instantiation. If this is the case, call the setStyle() method early in the instantiation phase to avoid unnecessary lookups. Early in the instantiation phase means setting styles from the component or application's initialize event, instead of the creationComplete or other event. By setting the styles as early as possible during initialization, you avoid unnecessary style notification and lookup.

Using Dynamically Repeating Controls for Better Performance

New in Flex 1.5 is the addition of the HorizontalList and TileList controls. You can use these controls for layouts that require dynamically repeating elements. They perform much better than layouts that used Repeaters. In fact, layouts created during the Flex 1.0 timeframe that used a Repeater may often be replaced by a combination of the HorizontalList or TileList controls and cell renderers for better performance.

Using the HorizontalList and TileList Controls

The HorizontalList and TileList controls are List controls that display data elements horizontally or in a tile layout, much like the HBox or Tile containers. Unlike the Repeater object, performance with these controls is determined by what is visible in the HorizontalList and TileList at that time. This behavior reduces instantiation time of the view significantly; a Repeater’s instantiation time will always be equal to or worse than the HorizontalList and TileList controls.

The HorizontalList and TileList controls usually contain a horizontal or vertical scroll bar, used to access all the items in the list. When a user scrolls, it triggers the creation of subsequent elements in the List. Thus, the user avoids creating all the possible elements at startup; they are created only when requested.

The HorizontalList and TileList controls perform much better than a Repeater object. In most cases it is a better choice to use them instead of a Repeater. However the Repeater control is still available in Flex; it is better to use the Repeater control to repeat simple elements. For example, it would make more sense to repeat a collection of RadioButton controls using a Repeater then a Horizontal or TileList control.

 

Page 9 of 12
Previous Page
Next Page