19

我正在构建一个单页 webapp。这意味着在一段时间内我会获得新的 DOM 元素，删除不需要的元素。例如，当我获取一个新表单时，我只需用该表单 HTML 替换特定 div 的内容，并设置此表单元素独有的侦听器。一段时间后，我将这个表单的内容替换为一个新的表单实例（具有不同的 ID）。

我再次为这个新表单设置了事件监听器。现在以前的表单不再是 DOM 的一部分，所以我应该自动对 DOM 元素进行垃圾收集。我还期望指向从 DOM 中删除的元素的侦听器函数消失。

但是，从 Chrome 收集的以下配置文件表明，我的听众数量随着时间的推移而增加。你能告诉我为什么会这样吗？我尝试点击“收集垃圾”按钮。但这是我得到的个人资料。我构建应用程序的方式有问题吗？有问题吗？如果有，我应该如何解决？

我的 web 应用程序的 Chrome 快照几分钟

万一这很重要，我将 JSP 模板语言与 jquery、jquery-ui 和其他一些插件一起使用。这就是我在页面上添加/删除的动态片段的样子。

<script>
  $(document).ready(function() {
    $("#unique_id").find(".myFormButton").button().click(
      function() {
        $.ajax({url: "myurl.html",
          success: function(response) {
                console.log(response);
          }
        });
    });
  });
</script>

<div id="unique_id">
    <form>
      <input name="myvar" />
      <button class="myFormButton">Submit</button>
    </form>
</div>

更新

如果你想看看这里的实际代码是相关部分。 此链接显示，当按下清除按钮时，将调用函数 clearFindForm，该函数使用 ajax 请求有效地重新获取内容（HTML 片段），并将此 jsp 中的整个 div 替换为获取的内容。refetchContent 函数的工作方式如下：这是代码的链接，以防有助于提供更好的答案。

function refetchContent(url, replaceTarget) {
  $.ajax({
    url: url,
    data: {},
    type: "GET",
    success: function (response) {
       replaceTarget.replaceWith(response);
    },
    error:   function (response) {
       showErrorMessage("Something went wrong. Please try again.");
    }
  });
}
4

3 回答 3

5

虽然 jQuery 非常擅长删除通过其方法删除的 DOM 元素的事件侦听器（包括 .html() - 只需阅读 API：http ://api.jquery.com/html/ ） - 它不会删除事件DOM 元素的侦听器，这些元素可能在分离的 DOM 树中仍然具有对它们的引用。

例如，如果您执行以下操作：

$.ajax({
    ....
})
    .done(function(response,status,jqXHR) {

        //create a detached DOM tree
        form = $(response)

        //add an event listener to the detached tree
        form.find('#someIDInTheResponse').on('submit',function() {

        });

        //add the form to the html
        $('#someID').html(form);
    });

//at some other point in the code
$('#someIDInTheResponse').remove();

请注意，在上面的示例中，尽管您从 DOM 中删除了元素，但侦听器不会从内存中删除。这是因为该元素仍然存在于可通过全局变量“form”访问的分离 DOM 树的内存中（这是因为我没有创建使用“var”在 done 函数的范围内创建初始分离 DOM 树。 ...有一些细微差别，jQuery 无法修复糟糕的代码，它只能做到最好。

其他 2 件事：

在回调或事件侦听器中执行所有操作（例如在单击按钮时执行此操作）很快就会变成真正糟糕的意大利面条代码，并且很快就会变得难以管理。尝试将应用程序逻辑与 UI 交互分开。例如，不要使用回调点击事件执行一堆逻辑，使用回调点击事件调用执行一堆逻辑的函数。

其次，也不太重要，（我欢迎通过评论就这个观点提供反馈）我认为 30MB 内存对于 Web 应用程序来说是一个相当高的基线。我有一个非常密集的谷歌地图网络应用程序，经过一个小时左右的密集使用后达到 30MB，你真的会注意到当你这样做时开始注意到它的迟缓。天知道如果它达到 60MB 会是什么样子。我认为 IE<9 在这一点上将变得几乎无法使用，尽管就像我说的，我欢迎其他人对此想法的反馈。

于 2013-01-21T01:41:05.780 回答
1

我想知道当您替换片段时，您是否只是没有取消绑定/删除先前绑定的事件侦听器？

我简要查看了您在更新后的问题中链接到的代码的特定部分，但除了您在文档中所做的准备之外，没有看到任何事件侦听器绑定，所以我猜您在替换时正在做一些额外的绑定文档片段。我不是 jQuery 专家，但通常绑定或分配额外的事件侦听器不会自动替换以前绑定/分配的事件侦听器。

我的观点是，您应该查看是否通过“click()”（或通过其他方法）对现有元素进行绑定，而无需先取消绑定现有的事件侦听器。

您可能会看一下moff对这个问题的回答，它特别提供了一个点击示例。

于 2013-01-30T14:12:55.243 回答
1

由于声誉，我无法添加评论，但要回应亚当所说的话......

总结一下 Adam 提出的情况，它可能与 jQuery 无关，问题可能出在普通的 Javascript 中。但是，您没有提供足够的代码让任何人真正了解问题的根源。您对范围封装的使用可能非常好，问题可能出在其他地方。

我建议您搜索用于查找内存泄漏原因的工具（例如，可视化/遍历整个对象/范围/引用/函数树等）。

使用 jQuery 需要注意的一件事是插件和对 DOM 的全局插入！我见过很多 JS 库，不仅仅是 jQuery 插件，都没有提供销毁器和清理方法。最糟糕的违规者通常是带有弹出窗口和弹出窗口的东西，例如日期选择器、对话框等，它们有一个讨厌的习惯，即在正文中添加图层 div 等而不删除它们。

需要记住的是，如果很多人只是尽可能地构建事物但不处理破坏，尤其是在 JS 中，因为即使在当今时代，他们仍然希望您将提供正常的网页。您还应该检查插件的销毁方法，因为并非所有插件都会挂钩删除事件。其他人在 jQuery 中也以凌乱的方式使用事件，因此流氓处理程序可能会停止执行以下清理事件。

总之，jQuery 是一个很好的健壮库，但要注意，仅仅因为有人依赖它并不意味着它继承了 jQuery 的质量。

出于好奇...您检查过 document.ready 上的听众了吗？也许你需要手动 GC 那些。

于 2014-09-27T13:28:51.853 回答