PDA

View Full Version : Memory Management Options



afters
2 May 2012, 12:03 AM
I had first published this question on stackoverflow (http://stackoverflow.com/questions/10397246/sencha-touch-2-memory-management-options), 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

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.
Remove Remove unused components from their containers WITHOUT destroying them. When they're needed again, re-attach them to their containers.
Advantages


no need to keep GUI-related information somewhere as state.
the component could be updated even when not appearing in the DOM.

Disadvantages


the component is cleared from the DOM, but the Sencha object is still kept in memory
you'd need to keep detached components somewhere, and make sure to check to attach existing ones insteaf of create new ones

mitchellsimoens
3 May 2012, 12:37 PM
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
3 May 2012, 12:54 PM
What do you mean by: "you can cache them on the direct child of tab panel."?

Thanks.

mitchellsimoens
3 May 2012, 12:57 PM
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
3 May 2012, 1:06 PM
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
3 May 2012, 1:43 PM
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
25 May 2012, 2:02 AM
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
27 May 2012, 4:25 AM
Anyone to help please ? I'm a student and I need to make my application work on IPhone.

kamerc
3 Apr 2014, 7:28 AM
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.

Mitchell, Can you further explain what you mean? I have been doing some memory analysis of my app and I think my controller is causing memory problems. Right now I have a controller for every view. In my controller I have references to components in the view and all the necessary action listeners (on container render, on button tap, etc). I am using a navigation bar and I have verified that the view is getting destroyed on pop (hitting back button). However, when I hit the back button to go back to the list page, the memory goes up a little, even though I'm going back to the same page that is already rendered with no new data. As I continue to select list items view the item detail and go back, the memory keeps going up and up and up.

I was reading that if there is a reference to the item somewhere in the code, it could prevent it from getting destroyed. I do have a reference in my controller. In fact, I removed the controller and did a test and noticed that the app memory was correctly decreasing when I went back to the list. Here is a snippet of my controller. Am I using the controller references correctly?



Ext.define('App.controller.Person.DetailsPage', {
extend: 'Ext.app.Controller',


config: {
models: [
'Person.Detailed'
],
stores: [
'Person.Detailed'
],
views: [
'Person.DetailsPage'
],


refs: {
personMap: 'PersonDetailsPage #personMap',
detailContainer: 'PersonDetailsPage'
},


control: {
"PersonDetailsPage": {
initialize: 'onContainerInitialize',
destroy: 'onContainerDestroy'
},
"personMap": {
onComplete: 'onMapComplete'
}
}
},

onContainerInitialize: function(component, eOpts) {
//init instance variables
Ext.apply(this, {
personStore : Ext.getStore('Person.Detailed')
});
this.loadStore(component);
},