Javascript 释放 DOM

Question

我编写了一个相当大的网络应用程序。它工作了一段时间，然后慢慢开始缓慢运行，因为 DOM 节点开始蠕动在 80,000 - 100,000 左右。

所以我一直在 Chrome 开发工具控制台 (DCTC) 中处理一些小数据集。

有人可以告诉我为什么以下内容有时有效，有时却无效。

var test = $('<div></div>');
test.remove();
test = null; //Doesn't seem to make a difference when it doesn't work

如果我在 CDT 的时间轴下查看 DOM 节点数，有时节点数会正确，有时它似乎拒绝放弃我试图删除的 DOM 节点。即使在按下 GC 按钮后也是如此。

以下在移除 DOM 节点和释放内存方面似乎是一致的。

//Seems to remove nodes just fine
for(var i = 0; i<100; i++){
    var test = $('<div></div>');
    $("body").append(test);
}
$("body").empty();

关于第一个示例，我认为它有时可能因为 NODELETE 标志而不起作用，因为它是一个变量定义，所以我尝试将我的赋值放在一个对象上，但这没有帮助。实际上，jQuery 的 remove 不会删除 dom 节点似乎更一致。

//Does not remove the node.
var test = {};
test.node = $('<div></div>');
test.node.remove();
test.node = null;

为什么不一致？

观察：

如果我这样做test = document.createElement('div');，它将始终创建一个分离的节点。 var test = .... 似乎始终如一地允许我清除节点，直到它搞砸然后所有赌注都关闭。

针对大家说没有 DOM 节点，请阅读以下内容：https://developers.google.com/chrome-developer-tools/docs/heap-profiling-dom-leaks 我要删除的 DOM 节点显示在分离的 dom 节点中，但“我该如何摆脱它们”是迫在眉睫的问题仍然存在。

Answer 1

经过更多测试，这是我想出的：

控制台确实正确显示了 DOM 节点数。然而，它似乎也错误地处理了变量声明和删除 DOM 节点。如果我从脚本运行我的示例，它们就可以正常工作，而不是从控制台运行。

如果我这样做：

        <script>
            var test = document.createElement('div');
            test = null;
            var test = {};
            test.node = document.createElement('div');
            delete test.node;


            var test = $('<div><div></div><div></div></div>');
            test.on("click", function(){
                alert('yes');
            });
            test.remove();
            test = null;
            //test = null;

            var test2 = {};
            test2.node = $('<div></div>');
            test2.node.remove();
            delete test2.node;
        </script>

从我的页面内部，它正确地释放了内存和孤立的 DOM 节点。如果我没有将变量设置为 NULL 或从对象中删除它，则分离的 DOM 节点将保留在那里并且无法删除它，因为您不再有对它的引用。

我认为对于那些使用 jQuery 并仅依赖 remove() 函数的人来说，这是一个很好的警告。