Question

我正在使用Phone Gap（HTML，CSS和JavaScript / jQuery）制作移动应用。该应用程序是一个大型网站的移动界面，它使用AJAX加载网页并显示它们。

我的应用程序加载页面如下：

有问题的HTML如下所示：

<div class="content">


</div>

我的java代码片段显示内容：

if (xmlHttp.readyState==4 && xmlHttp.status==200) {
            document.getElementById("content").innerHTML  = "";
            var obj = JSON.parse(xmlHttp.responseText);
            document.getElementById("content").innerHTML = obj["data"];
        }

基本上，响应包含带有HTML的JSON数据，通过设置它的innerHTML，在前面提到的<div>元素中显示。

然而，在加载几页后，应用程序在我的Android设备上崩溃了。由于它似乎在页面（AJAX页面）之间慢慢得到响应，我认为这是某种内存泄漏。我在chrome中检查了Web应用程序，获取了内存配置文件，发现页面之间的内存占用量增加了。我不是Chrome开发者工具专家，但引起我注意的是这些＆＃34;分离的DOM树＆＃34;加载第二页后出现，表示加载新AJAX页时第一页的DOM元素没有从内存中释放。

什么会导致这些DOM元素无法正常释放？ innerHTML = "";不是从另一个元素中清除所有DOM元素的正确方法吗？

我更希望保持我的应用程序纯粹的AJAX，但如果我必须在物理上切换页面以便正确清除所有内存，那么我想我无法做出选择。

Answer 1

据我所知，如果某些东西仍然引用了对象，比如DOM对象，GC就不会收集它们。这适用于元素，即使它们是从DOM中删除的。检查您的代码。

此外：

你不应该缓存document.getElementById("content")吗？一遍又一遍地调用它们不会改变它的价值。将其存储在变量中。
并且innerHTML应该替换所有元素的内容。在放东西之前无需清除它。
如果这是调试返回，您是否应该将其登录到console或其他什么内容？

像这样：

var content = document.getElementById("content");
...
if (xmlHttp.readyState==4 && xmlHttp.status==200) {
  var obj = JSON.parse(xmlHttp.responseText);
  content.innerHTML = obj["data"];
}

基于AJAX的应用程序内存泄漏？

1 个答案: