Javascript dom操纵内存泄漏 [英] Javascript dom manipulation memory leak

问题描述

您好我使用原始javascript DOM创建了一个dom：

Hi I have created a dom using raw javascript DOM:

Javascript代码：

Javascript code:

var parentElm = document.createElement("div");
var child1 = document.createElement("p");
var child2 = document.createElement("p");

parentElm.id = "parent";
child1.id = "child1";
child2.id = "child2";

child1.innerHTML = "Hello";
child2.innerHTML = "world"; // Is it a good way 

parentElm.appendChild(child1);
parentElm.appendChild(child2);
document.body.appendChild(parentElm);

生成的HTML是：

<div id="parent">
    <p id="child1">Hello</p>
    <p id="child2">World</p>
</div>

现在，当我想删除上述部分时，我会执行以下操作。

Now when I want to remove the above section, I do as following.

document.body.removeChild(parentElm);

这里我害怕javascript内存泄漏。

Here I am afraid of javascript memory leak.

• 如果我从正文中删除父元素，它是否从内存中完全删除了
  。 ？


• 如果我从正文中删除父元素，那么垃圾收集器也会自动从内存中删除
  子元素。或者我需要手动删除
  子元素？


• 在上面的代码中使用innerHTML是一个好方法（child1.innerHTML =Hello;）

请帮助我进行javascript dom操作。

Please help me in javascript dom manipulation.

推荐答案

如果我从正文中删除父元素，它是否完全从内存中删除。 ？

If I am removing parent element from body, does it totally removed from memory. ?

如果您的 parentElm ， child1 ， child2 变量不再在范围内，或者您已将它们设置为其他值，是的。

If your parentElm, child1, and child2 variables are no longer in scope or you've set them to another value, yes.

如果我从body中删除父元素，它的子元素也会被垃圾收集器自动从内存中删除。或者我需要手动删除子元素？

If I am removing parent element from body, does it's child elements are also removed from memory by garbage collector automatically. Or I need to remove child elements manually ?

如果你的 child1 和 child2 变量不再在范围内，或者您已将它们设置为其他值，是的，删除父项是您需要做的就是删除子项并允许它们被清除up。

If your child1 and child2 variables are no longer in scope or you've set them to another value, yes, removing the parent is all you need to do to remove the children and allow them to be cleanned up.

在上面的代码中使用innerHTML是一个好方法（child1.innerHTML =Hello;）

Is using innerHTML in the above code is a good way (child1.innerHTML = "Hello";)

这很好，也很常见。

所以这里没有内存泄漏，例如：

So there's no memory leak here, for instance:

function addParagraphs() {
    var parentElm = document.createElement("div");
    var child1 = document.createElement("p");
    var child2 = document.createElement("p");

    parentElm.id = "parent";
    child1.id = "child1";
    child2.id = "child2";

    child1.innerHTML = "Hello";
    child2.innerHTML = "world"; // Is it a good way 

    parentElm.appendChild(child1);
    parentElm.appendChild(child2);
    document.body.appendChild(parentElm);
}

function removeElement(element) {
    if (element.remove) {
        element.remove(); // newer DOM method, not on all browsers
    } else if (element.parentNode) {
        element.parentNode.removeChild(element);
    }
}

addParagraphs();
removeElement(document.getElementById("parent"));

...因为 addParagraphs 中的变量可以全部回收。

...because the variables in addParagraphs can all be reclaimed.

但是，如果你创建一个关于这些变量的闭包而你保留它，那么这可以使元素在内存中保持比你预期的更长的时间：

However, if you create a closure over those variables and you keep it, that can keep the elements in memory longer than you expect:

function addParagraphs() {
    var parentElm = document.createElement("div");
    var child1 = document.createElement("p");
    var child2 = document.createElement("p");

    parentElm.id = "parent";
    child1.id = "child1";
    child2.id = "child2";

    child1.innerHTML = "Hello";
    child2.innerHTML = "world"; // Is it a good way 

    parentElm.appendChild(child1);
    parentElm.appendChild(child2);
    document.body.appendChild(parentElm);

    return function() {
        console.log("Hi there");
    };
}

function removeElement(element) {
    if (element.remove) {
        element.remove(); // newer DOM method, not on all browsers
    } else if (element.parentNode) {
        element.parentNode.removeChild(element);
    }
}

var f = addParagraphs();
removeElement(document.getElementById("parent"));

我们从 addParagraphs 和商店返回的函数在 f 中是一个闭包在它创建的上下文中。理论上，即使该函数不使用 parentElm ， child1 或 child2 ，它引用了它所在的上下文创建，并且该上下文引用了这些变量，将它们保存在内存中。 （现代JavaScript引擎可以稍微优化一下。）因此从理论上讲，只要我们引用 f ，那些DOM元素仍然可以存在于内存中，并保持活着状态函数保持活动的变量。它仍然不一定是泄漏，如果你在某个时候释放 f ，但记住它是有用的。

The function we return from addParagraphs and store in f is a closure over the context it was created in. In theory, even though the function doesn't use parentElm, child1, or child2, it has a reference to the context where it was created, and that context has a reference to those variables, keeping them in memory. (Modern JavaScript engines can optimize this a bit.) So in theory, as long as we have a reference to f, those DOM elements can still exist in memory, kept alive by the variables that are kept alive by the function. It's still not necessarily a leak, if you release f at some point, but it's useful to remember.

当然，您也可以用较少的代码创建这些元素：

Of course, you can also create those elements with less code:

var parentElm = document.createElement('p');
parentElm.id = "parent";
parentElm.innerHTML =
    '<p id="child1">Hello</p>' +
    '<p id="child2">world</p>';
document.body.appendChild(parentElm);

或在现代浏览器上：

document.body.insertAdjacentHTML(
    'beforeend',
    '<p id="parent">' +
        '<p id="child1">Hello</p>' +
        '<p id="child2">world</p>' +
    '</p>'
);

这篇关于Javascript dom操纵内存泄漏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！