0

我正在使用 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 开发者工具方面的专家，但引起我注意的是加载第二页后出现的这些“分离的 DOM 树”，这表明新 AJAX 时第一页的 DOM 元素没有从内存中释放页面已加载。

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

我宁愿让我的应用程序保持纯 AJAX，但如果我必须物理切换页面以正确清除所有内存，那么我想我别无选择。

4

1 回答 1

0

据我所知，如果某些东西仍然引用对象，比如 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"];
}
于 2013-05-03T08:10:43.667 回答