How to debug memory usage rise in PhoneGap application?

Question

I have a PhoneGap / JQuery MObile application that receives data from a server through Ajax and displays it in a list. With each Ajax sample, the memory occupied by the application increases by about 10 MB. For the first sample, everything may be in order, since it selects a large number of records (about 700). However, for subsequent calls, I understand that it should reuse memory, and not accumulate another 10 MB each time. I used .off () to free event handlers if they held memory, but to no avail.

Here is the main Div page where the output is displayed:

<div data-role="content" class="MainContent" style="overflow:hidden; padding-top: 0px;"> <ul data-divider-theme="b" data-role="listview" data-inset="true" class="MainMenu"> </ul> 

And this is JavaScript code that selects data from the server and displays it in the section above.

 AjaxFile = "mydomai.com/ajax.php"; $.get(AjaxFile, function (AjaxData) { $( ".PL" ).off(); $(".MainMenu").off(); $(".MainContent").off(); AjaxData = '<li class="MainMenuList" data-role=list-divider>' + gTitle + AjaxData; $(".MainMenu").empty(); $(".MainMenu").html(AjaxData); $(".MainMenu").listview('refresh'); window.scrollTo(0, 0); $.mobile.loading('hide'); HighlightRow(gCurrentFile); $(document).ready(function () { $(".PL").click(function () { if ( !$(this).hasClass("BTitleRow") ) { $(".PL").removeClass("RowHighlight"); $(this).addClass("RowHighlight"); OpenNewLink($(this).attr('name')); } }); }); }); AjaxData = null; return; 

How to free up memory and ensure reuse of the same memory instead of storing more and more memory?

Update

Even if I remove the bottom, I still see an increase in memory usage:

 $(document).ready(function () { $(".PL").click(function () { if ( !$(this).hasClass("BTitleRow") ) { $(".PL").removeClass("RowHighlight"); $(this).addClass("RowHighlight"); OpenNewLink($(this).attr('name')); } }); }); 

It seems that some kind of memory leak has occurred in Ajax, as well as viewing the list ("refresh").

Answer 1

Not the complete answer, but if you can run webapp in Chrome (so outside of Phonegap), you can use the Javascript profiler to get a heap snapshot to find out where the memory is used.

If you need to go into Phonegap, but you have an Android device, you can also connect a Chrome debugger to it, and with some hacks it can also connect iOS devices and / or simulators.

Answer 2

Guilt is not your code. This is jQuery that loves to eat memory, I often see a ratio of 4 between pure javascript and a jQuery application in memory.

Either you do not use jQuery for a critical role in your mobile development, or you no longer use jQuery for your mobile applications (what I do), or you use http://plugins.jquery.com/cache/ and clean the memory from time to time.

BR

Answer 3

Try this, it will clear when your application starts. I know that now this is what you really want, but it can help you.

 super.clearCache(); // just add This Line super.loadUrl("file:///android_asset/www/index.html");