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

Question

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

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

有问题的 HTML 如下所示：

<div class="content">


</div>

还有我的显示内容的java代码sn-p：

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，但如果我必须物理切换页面以正确清除所有内存，那么我想我别无选择。

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"];
}