DOM 的非常小的 jsfiddle 泄漏 jquery

Question

我开始跟踪我的网络游戏中的一些内存泄漏。我发现了一个重复出现的模式，该模式正在泄漏 DOM 个节点，但我不明白为什么。我不是使用 chrome 开发工具的专家，但我正在学习。

我可以设置的最小示例是：

<div id = "main">
</div>

<button onclick ='reset();'> test </button>

<script>
function reset()
{
    var Div = "<select></select>";
    $("#main").html(Div);
}
</script>

JSFIDDLE LINK

在chrome中，当我使用开发工具和时间线时，我们可以看到：

我们在加载 jsfiddle 页面时得到了 X DOM 个节点
如果我们使用 'test' 按钮一次，我们得到 X+2 个节点
每次后续使用都会添加 3 个节点

这些节点从未进行过 GC，我不明白为什么。当您在 <select> 中使用 <option> 时，问题会更糟（这似乎与父节点没有得到 GC 的事实相一致）。据我所知，<input> 的问题也相同（至少有复选框和收音机）。

看起来很简单，我显然错过了一些简单的东西，但它是什么超出了我的范围。

你有什么办法可以解决这个问题吗？我试过使用堆快照，但由于我还没有完全理解它，所以我没有得到任何结果。

编辑：编辑以解决问题，因为我还没有找到答案。

Answer 1

这会在分离的 DOM 树中生成元素 - 更好的解释 here 。这些元素是 C++ 对象而不是 js 对象。

我同意每次点击都会创建节点，但是一旦我用适当的按钮强制 GB，就会看到它直线下降。

Answer 2

我最近在使用 Chrome 43 时也遇到了这个问题。这似乎是 chrome 本身的一个错误，并在 Chrome 46 中得到修复（Chrome Canary )

DOM 的非常小的 jsfiddle 泄漏 jquery

Very small jsfidlle of DOM leak with jquery

javascript

jquery

dom

memory-leaks