Memory Management Options

[afters]

I had first published this question on stackoverflow, but I figured I could get more answers here.

I'm looking into ways to save memory in Sencha Touch 2. I see two options, as I'll describe below.
I'd like to get advice on the difference of memory consumption between the two options, and to know if I'm missing anything.

Memory-saving options

1. Remove and Destroy
   
   Remove unused components from their containers, and destory them. When they're needed again, re-create them.
   Advantage:
   this approach can be greatly assisted by container ref's 'autoCreate' option and by container config's 'autoDestroy' option.
   Disadvantage:
   to re-create the view as it was before destruction, you need to make sure every important piece of information you wish to recreate (e.g. scroll-location in list, map-center in map) is kept as state elsewhere.
2. Remove
   
   Remove unused components from their containers WITHOUT destroying them. When they're needed again, re-attach them to their containers.
   Advantages
   
   1. no need to keep GUI-related information somewhere as state.
   2. the component could be updated even when not appearing in the DOM.
   Disadvantages
   
   1. the component is cleared from the DOM, but the Sencha object is still kept in memory
   2. you'd need to keep detached components somewhere, and make sure to check to attach existing ones insteaf of create new ones

[mitchellsimoens]

Removing unused components can speed up your app but it also comes at a cost. If you are going to be doing it a lot, DOM read/writes can add up and affect performance.

I find it best to have a mix of destroying components and not destroying them. Like if you have a tab panel, you don't want to destroy them but you can cache them on the direct child of tab panel.

[afters]

What do you mean by: "you can cache them on the direct child of tab panel."?

Thanks.

[mitchellsimoens]

Put a reference to the component on the container. Then when the container is activated add the component from the reference to the container.

[afters]

So, basically, track the component it in the container, but out of 'items', so it won't get rendered?

I guess my question boils down to this: would keeping the component alive but outside the DOM save memory similarly to destroying the component?

[mitchellsimoens]

So, basically, track the component it in the container, but out of 'items', so it won't get rendered?

Correct!

I guess my question boils down to this: would keeping the component alive but outside the DOM save memory similarly to destroying the component?

If you remove the component but do not destroy it, you minimize DOM size but of course you still have that component in device memory. The benefit is since DOM size is down, you have better performance and DOM size is going to have a larger impact than having some components in memory.

[anasb079]

Hi,

I'm new in sencha touch development and I need some explainations please because my application is crashing on IPhone due to memory lack.

Please can you provide a few lines example doing the following :
1) Put a reference to the component on the container (how can I track the component in the container out of 'items' ?).
2) Activate the container.
3) Add the component from the reference to the container.

Thank you.

[anasb079]

Anyone to help please ? I'm a student and I need to make my application work on IPhone.