Question

我写了一个相当大的网络应用程序。它运行良好一段时间，然后慢慢开始运行缓慢，因为DOM节点开始爬行大约80,000 - 100,000。

所以我一直在浏览Chrome Dev Tools控制台（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的删除不会删除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（）函数的人来说，这是一个很好的警告。

Javascript释放DOM

1 个答案: