For few months now I have been developing an Android app using PhoneGap 2.8 and on the javascript side I have used Backbone and jQuery as my main frameworks. As my application has grown to a reasonable size, I have started to notice a considerable memory consumption. Having read different articles that explain why PhoneGap requires considerable amount of memory even to run, I still believe that I can do some optimization to how i use memory.

In BackBone we have a Router object that maps URI-s to specific functions, which render me something called a View object. Not only I implemented my router functions to create a view and render it, but I also store globally reference to currently being displayed view. So before a new view is created, I tell the old view to make some clean up (That is done recursively since views can contain more "sub" views). Under clean up I currently tell view to undelegate his events (I trust Backbone removes the event listeners). Not much more is done currently. Once new view is rendered, global variable will reference the new view. I trust that javascript GC will release the memory, used by the old view. Alas, I dont things this is happening- the more I navigate around my app, the more memory is being used up. I am aware that there is some memory leaking going on, but I can't figure out what is it, that takes memory. One thing I suspect is that old objects are not being garbage collected properly for some reason. I suspect that once I render new html (DOM) over some container, perhaps old DOM is causing memory leaks, perhaps some event handlers are being unnecessarily stored somewhere.

What I would like to know, if there is any tools or mands or tips on how can I debug/ trace/ measure where memory is being allocated. Is there a way to access all event listeners and measure them somehow (same for DOM). Any article to smart memory efficient techniques would also be appreciated. Currently only thing that I can thing of to do, is to start recursively deleting all attributes of the objects (in the end objects as well) I am willing to destroy.

Any suggestion is very wele! Thank you in advance.

For few months now I have been developing an Android app using PhoneGap 2.8 and on the javascript side I have used Backbone and jQuery as my main frameworks. As my application has grown to a reasonable size, I have started to notice a considerable memory consumption. Having read different articles that explain why PhoneGap requires considerable amount of memory even to run, I still believe that I can do some optimization to how i use memory.

In BackBone we have a Router object that maps URI-s to specific functions, which render me something called a View object. Not only I implemented my router functions to create a view and render it, but I also store globally reference to currently being displayed view. So before a new view is created, I tell the old view to make some clean up (That is done recursively since views can contain more "sub" views). Under clean up I currently tell view to undelegate his events (I trust Backbone removes the event listeners). Not much more is done currently. Once new view is rendered, global variable will reference the new view. I trust that javascript GC will release the memory, used by the old view. Alas, I dont things this is happening- the more I navigate around my app, the more memory is being used up. I am aware that there is some memory leaking going on, but I can't figure out what is it, that takes memory. One thing I suspect is that old objects are not being garbage collected properly for some reason. I suspect that once I render new html (DOM) over some container, perhaps old DOM is causing memory leaks, perhaps some event handlers are being unnecessarily stored somewhere.

What I would like to know, if there is any tools or mands or tips on how can I debug/ trace/ measure where memory is being allocated. Is there a way to access all event listeners and measure them somehow (same for DOM). Any article to smart memory efficient techniques would also be appreciated. Currently only thing that I can thing of to do, is to start recursively deleting all attributes of the objects (in the end objects as well) I am willing to destroy.

Any suggestion is very wele! Thank you in advance.

• javascript
• backbone.js
• memory-management
• memory-leaks
• cordova

• Since I use jQuery to add content to DOM via .html(data) function, I have read that calling .empty().html(data) is a better choice, since empty() removes the event handlers and all texts before removing DOM elements. Having read that, I have prepended empty() to all my .html() calls, and I havent noticed considerable improvement. I still believe that the root of the problem is to be found. – Erich Jagomägis Commented Sep 20, 2013 at 9:15
• Chrome has an extension to use with ADB but I think it only works with Chrome not native Android browser (which being used in WebView) developers.google./chrome-developer-tools/docs/…. Paul Irish had suggested a list of tools you may able to use: plus.google./+PaulIrish/posts/ccP98BTMd5Z. I have used weinre before but it doesn't do profiling. jsHybugger may able to help you. – j03w Commented Sep 20, 2013 at 21:54
• I have tried jsHybugger and I really like the feature it currently provides. Developer of jsHybugger informed me that soon he will release a version that will include Timeline tab functionality as well as seeing the current javascript objects in the memory (exactly what I need). In other words, jsHybugger is a really really useful tool for phonegap development and I remend it to everyone. – Erich Jagomägis Commented Oct 10, 2013 at 12:17
• Is there a difference between jsHybugger and Remote Debugging Chrome on Android? developers.google./chrome-developer-tools/docs/… – TWilly Commented Feb 17, 2014 at 15:44

1 Answer 1

I faced similar issues with my first phonegap app. Few techniques we managed to apply were

*old view - view getting navigated away

• Unbind all events associated with old view
• Remove all nodes attached to the view from dom, to make sure event are also removed
• Remove old view object, model/collection, so that there are no instances remaining on the DOM
• Moreover try to use prototyping as much as possible, as functions created via prototype occupy space in RAM only once. So if the view is created/initiated again, its associated/child functions aren't going to be pushed into RAM again
• Most imp, make sure 'this' pointer isn't leaking anywhere between files. One of my workplace used to get stuck after 1.5 hrs of play and after a week debugging, we came to find out that there was a leakage of this pointed between 2 files/objects/views, which created a circular referencing and make the DOM to explode.

Also you can try to use Google Chrome's profiling tool

Few useful links

• http://blog.socialcast./javascript-memory-management/
• Backbone.js Memory Management, Rising DOM Node Count