Sencha Touch 2 Memory Management Options

Question

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 for - and attach - existing ones before creating new ones

Answer 1

I also posted this on the Sencha forums: http://www.sencha.com/forum/showthread.php?200314-Memory-Management-Options

I got the following, rather general answer:

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.