1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    afters is on a distinguished road

      0  

    Default Memory Management Options

    Memory Management Options


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,226
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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 Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    afters is on a distinguished road

      0  

    Default


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

    Thanks.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,226
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Put a reference to the component on the container. Then when the container is activated add the component from the reference to the container.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    May 2012
    Posts
    3
    Vote Rating
    0
    afters is on a distinguished road

      0  

    Default


    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?

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,226
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by afters View Post
    So, basically, track the component it in the container, but out of 'items', so it won't get rendered?
    Correct!

    Quote Originally Posted by afters View Post
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    anasb079 is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha User
    Join Date
    May 2012
    Posts
    2
    Vote Rating
    0
    anasb079 is on a distinguished road

      0  

    Default


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

  9. #9
    Sencha Premium Member
    Join Date
    Jan 2014
    Location
    Cary, NC
    Posts
    35
    Vote Rating
    0
    kamerc is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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?

    Code:
    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);
        },