Building 'off the display list'

[angie]

I have read that for improved performance you should add children off the display list so that it doesn't have to re-measure etc. Am I right in assuming that this means adding children bottom up, for example
var t:TextInput = new TextInput();
var h:HBox = new HBox();
h.addChild(t);
var p:Panel = new Panel();
p.addChild(h);
addChild(p);
offers better performance than the following?
var p:Panel = new Panel();
addChild(p);
var h:HBox = new HBox();
p.addChild(h);
var t:TextInput = new TextInput();
h.addChild(t);

This makes sense to me. However, if these were all custom components, eg MyPanel, which in it's createChildren it adds MyHBox, and in it's createChildren it adds TextInput, doesn't that mean that we lose control over this and the line var p:MyPanel = new MyPanel(); will mean that everything is added to the display list top down?

The reason I ask is that I have a custom ActionScript component that loops through a definition and adds children. Some of these child components extend HBox and have children of thier own, some simply extend TextInput. In my test it is adding 47 children and it is taking a second to display, which is not acceptable performance. Is this an expected duration or is there anything I can do to affect the order that the children are added to improve performance?

Thanks

[worthyashes]

If you're adding a boat load of children then it's going to take a time to put that all together. Nesting down parent->child->child->child does take some performance hits.

Possibly a better approach would be to create custom components with the children required and then use states or view stacks to manage the display.

Basically if you don't need to bring it in straight away- bring it in later

[angie]

Thanks, but unfortunately I need everything to be displayed at the same time. My component is a form, and I have around 20 possible custom components that can be used to make up the form eg text input, combobox etc. These are all custom components so that all of the functionality, binding, child controls are encapsulated and can be reused. Any suggestions on how to improve performance on this?

[Peter Cowling]

Hi Angie,

Pulling together the points you make:

1. You have a form with 20 custom components.

2. These components are selected by a custom ActionScript component that loops through a definition and adds [the] children.

3. Your test shows that 47 children are being added, and that this takes a second to display.

As things stand you face an outright performance problem. Presumably the 1 second was on your computer, and amongst your user group are people with less capable computers. The point being, you can tweak things, but what you need is likely to result in an unacceptable wait.

With that in mind here are a few questions I would ask myself in your situation:

> Can we not break up the form into two (or more) parts?
> Can we ditch the Actionscript component i.e. I guess it is needed because it is not the same 20 components used everytime.
> Can we start work on the form ahead of time? i.e. If user selections define which 20 components are required, can we not start 'building off the display list' as soon as users' commit?