如何调试PhoneGap应用程序中的内存使用量上升问题？

Question

我有一个使用PhoneGap / JQuery Mobile开发的应用程序，通过Ajax从服务器获取数据并将其显示为列表。每次Ajax获取数据时，应用程序占用的内存会增加约10 MB。对于第一次获取数据，这可能还可以接受，因为它会获取大量记录（约700条）。然而，在后续调用中，我的理解是它应该重用内存，而不是每次堆积另外10 MB。我已经使用了.off（）来释放事件处理程序，以防它们占用内存，但没有成功。

以下是主页面Div，其中显示输出：

<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>

以下是从服务器获取数据并在上述div中显示的JavaScript代码。

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;

如何释放内存并确保重复使用相同的内存而不是堆积更多的内存？

更新

即使我删除下面的部分，我仍然可以看到内存使用量不断上升：

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

似乎在Ajax以及listview("refresh")中存在某种内存泄漏问题。

- AnR

---

你的列表里有很多图片吗？ - Hanh Le

不，该列表不包含任何图标。 - AnR

尝试在您的jQuery.ajax({})中添加"cache: false,"。另外，您如何计算/知道它使用了大约10 MB内存？因为这对我来说很新奇，我想知道，谢谢。 - Shivam Pandya

长按主屏幕并点击“活动应用程序”选项卡，该选项卡还显示内存使用情况。 - AnR

刷新页面。这是一种方法。 - Tasos

我已经在执行刷新操作。请参见代码中上方的 $(".MainMenu").listview('refresh'); - 除非你不是指那个。刷新整个页面可能会产生不必要的闪烁效果。 - AnR

Answer 1

这并不是一个完整的答案，但是如果您可以在Chrome中运行Web应用程序（因此不在Phonegap中），则可以使用JavaScript分析器来获取堆快照以确定内存的使用情况。

如果您必须在Phonegap中运行，但有一台Android设备，则也可以将Chrome调试器连接到它，并通过一些技巧也可以将iOS设备和/或模拟器连接。

- Jan Misker

---

谢谢。是的，我可以运行Ripple Emulate在浏览器中运行它。你说的是这个吗：https://developer.mozilla.org/en-US/docs/Tools/Profiler - AnR

不好意思，我指的是堆分析，请看这里：https://developer.chrome.com/devtools/docs/heap-profiling - Jan Misker

Answer 2

罪责不在你的代码，而是jQuery喜欢吃内存。我经常看到纯JavaScript应用和jQuery应用内存消耗之间的比例为4:1。

要么你不在移动开发的关键部分使用jQuery，要么你不再为移动应用程序使用jQuery（这就是我正在做的），要么你使用http://plugins.jquery.com/cache/并定期清理内存。

敬礼

- Régis FLORET

---

谢谢。我会尝试使用这个插件。 - AnR

Answer 3

尝试这个，它会在应用程序启动时清除缓存。我知道这不是你真正想要的，但它可能会对你有所帮助。

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

- Shivam Pandya

---

这是一个Java的事情，不是吗？但我没有使用Java。它纯粹是使用JQuery Mobile的JavaScript。 - AnR

@Anjum 是的，你只需要把它添加到你在Eclipse中src文件夹中找到的Activity的java文件中。(在我的情况下 src -> com.app.example -> MainActivity.java) 而且你提到你使用的是phonegap，所以如果你在Eclipse中创建了phonegap应用程序，你会在src文件夹中找到它。 - Shivam Pandya

不，我没有使用Eclipse。我使用简单的文本编辑器（Notepad++）来维护源代码。 - AnR