释放DOM的Javascript [英] Javascript Freeing the DOM

问题描述

我写了一个相当大的Web应用程序.它可以运行一段时间，然后随着DOM节点开始缓慢蔓延至大约80,000-100,000，缓慢地开始运行缓慢.

I've written a fairly large web app. It works good for awhile and then slowly starts running sluggish as DOM nodes start creeping around 80,000 - 100,000.

因此，我一直在研究Chrome开发工具控制台(DCTC)中的一些小数据集.

So I've been screweing around with some small data sets in the Chrome Dev Tools console (DCTC).

有人可以告诉我以下内容为何有时起作用，而有时却不起作用.

Can someone tell me why the following works sometimes and then sometimes it does not.

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

如果我在CDT的时间轴"下看到DOM节点数，则有时该节点数是正确的，而其他时候它似乎拒绝放弃我要删除的DOM节点.即使按下GC按钮也是如此.

If I watch the DOM node count under Timeline in CDT, the sometimes the node count will be correct, other times it seems to refuse to give up the DOM node I'm trying to remove. This is even after pushing the GC button.

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

The following seems to be consistent in removing the DOM nodes and freeing memory.

//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节点似乎更加一致.

In regards to the first example, I thought that perhaps it didn't work sometimes because of the NODELETE flag because it's a variable definition, so I tried putting my assignment on an object but that did not help. It actually seems to be more consistent that jQuery's remove would not remove the dom node.

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

为什么不一致?

观察:

如果我执行test = document.createElement('div');，它将始终创建一个分离节点. var test = ....似乎很一致，允许我清除节点，直到混乱为止，然后所有赌注都消失了.

if I do test = document.createElement('div'); it will consistently create a detached node. var test = .... seems to be consistent in allowing me to clear the node until it messes up and then all bets are off.

要回应所有人说没有DOM节点的情况，请阅读以下内容: https://developers.google.com/chrome-developer-tools/docs/heap-profiling-dom-leaks 我要删除的DOM节点显示在分离的dom中节点，但是如何摆脱它们"仍然是迫在眉睫的问题.

In response to everyone saying there is no DOM node, please read this: https://developers.google.com/chrome-developer-tools/docs/heap-profiling-dom-leaks The DOM nodes I'm trying to delete show up here in the detached dom nodes, but "how do I get rid of them" is the looming question still.

推荐答案

经过更多测试之后，这是我想到的:

After some more testing, here is what I came up with:

控制台不会正确显示DOM节点数.但是，它似乎也处理不正确的变量声明和删除DOM节点.如果我从脚本运行示例，则它们可以正常运行，但不能从控制台运行.

The console does correctly show the DOM node counts. It also however seems to handle variable declaration and removing DOM nodes incorrectly. If I run my examples from script, they work just fine, not from the console though.

如果我这样做:

        <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节点将保留在该位置，并且由于您不再有对其的引用，因此无法将其删除.

From inside my page, it correctly frees up the memory and orphaned DOM nodes. If I do not set the variable to NULL or delete it from an object, the detached DOM node will remain there and there is no way to remove it as you don't have a reference to it anymore.

对于那些仅使用remove()函数使用jQuery的人，我认为这是一个很好的警告.

I think this is a good word of caution to those using jQuery and relying on the remove() function solely.

这篇关于释放DOM的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！