How to debug memory usage climbing in PhoneGap app?

Question

I have a PhoneGap / JQuery MObile App which fetches data from server thru Ajax and displays it as a list. With each Ajax fetch the Memory occupied by App increases by about 10 MB. For the first fetch it might be OK as it fetches a large number of records (around 700). However, for subsequent calls my understanding is that it should reuse the memory instead of piling up another 10 MB each time. I have used .off() to release event handlers in case they were holding the memory but no success.

Here is the main page Div 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 the JavaScript code that fetches the data from server and displays in the above div.

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 can I free up the memory and ensure that the same memory is reused instead of piling up more and more memory?

Update

Even if I removing below part, I can still see the memory usage climbing up:

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

There appears to be some kind of memory leak in Ajax as well as listview("refresh").

Answer 1

Not a full answer, but if you can run the webapp in Chrome (so outside of Phonegap) you could use the Javascript profiler to take a Heap Snapshot to figure out where the memory is used.

If you have to run inside Phonegap but have an Android device it is also possible to connect the Chrome debugger to it, and with some hacking it's also possible to connect iOS devices and/or simulators.

Answer 2

The guilt is not your code. It's jQuery which love to eat memory I often see a ratio of 4 between a pure javascript and a jQuery application in memory consomption.

Either your don't use jQuery for critical part in your mobile development, or you don't use jQuery anymore for your mobile apps (that's what I'm doing), either you use http://plugins.jquery.com/cache/ and clean memory from time to time.

BR