javascript - webapp 中可能的内存泄漏

Question

在我的 webapp 中，我根据服务器发送的页面片段创建了一些 DOM 元素。任何新片段都是在 jsp 页面中生成的具有唯一 ID 的 div。

我认为使用也作为页面片段的一部分发送的脚本标记为该 div 中的元素注册事件。

这是我的页面片段的样子。

<script>
$(document).ready(function() {
   var myButton = $("#<unique_tab_id").find(".myButton);
   myButton.click(clickFunction);
   function clickFunction() {
   }
});
</script>

<div id="<unique_tab_id">
  <button class="myButton">
   My Button
  </button>
</div>

随着时间的推移，页面上会添加和删除多个 div。删除是基于一些仅调用 jquery replaceWith 或删除函数的用户操作。

添加了新元素。假设 jquery 会自动注销它们，我不会对事件做任何事情。

我的假设是否正确？这种编码风格可能存在内存泄漏吗？一段时间后，我看到我的页面变慢了。这是由于内存使用量增加。我在这里泄漏内存了吗？

在$(document).ready()中定义的函数中涉及到闭包。但我假设一旦相应的 div 被删除，它们将不再处于事件状态。是对的吗？还有什么可能在这里泄漏内存。

如果您想在此处查看更多详细信息，请查看代码: https://github.com/C4G/V2V/blob/f4dd780ff5bf1d3b1d456d421602038500769fd9/war/WEB-INF/jsp/donors/addDonorForm.jsp

Answer 1

简而言之:众所周知，jQuery 的 Cache 对象存在某些垃圾回收问题，其中一些问题被开发人员解决了，其中一些问题被忽视了。过去曾发生过几次这样的事情:

• 当 DOM 节点被取消注册时，事件不会从 jQ 缓存中清除
• 缓存被三对象循环引用击败并且没有进行垃圾收集

抛出一些代码，有人可能会测试它。现在，我所能提供的只是泛型。尝试在删除对象之前从对象中手动取消注册所有事件(off() 如果您知道已绑定(bind)的事件)，并查看泄漏是否仍然存在。

你如何移除你的对象？如果您设置 innerHTML=null，您的对象很可能仍在内存中。

您如何追踪内存泄漏？可能想在 firebug 中运行 JS 探查器以查看是否确实存在泄漏。