javascript - JavaScript 中不需要的事件监听器的垃圾收集

Question

我正在构建一个单页网络应用程序。这意味着在一段时间内我会获得新的 DOM 元素，删除不需要的元素。例如，当我获取一个新表单时，我只需用该表单 HTML 替换特定 div 的内容，并设置该表单元素特有的监听器。一段时间后，我用新的表单实例(具有不同的 ID)替换此表单的内容。

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

但是，从 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>

更新

如果您想查看实际代码，这里是相关部分。 This链接显示，当按下清除按钮时，将调用函数clearFindForm，该函数使用ajax请求有效地重新获取内容(HTML片段)，并用获取的内容替换该jsp中的整个div。refetchContent 函数的工作原理如下:Here是代码的链接，以防有助于给出更好的答案。

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.");
    }
  });
}

Answer 1

虽然 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”在 did 函数的范围内创建初始分离 DOM 树。 ...有一些细微差别，jQuery 无法修复错误的代码，它只能做到最好。

另外两件事:

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

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