Javascript dom操纵内存泄漏

嗨,我已经使用原始javascript DOM创建了一个dom:

Javascript代码:

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是:

    
Hello
    
World

现在当我想删除上面的部分时,我会做如下.

document.body.removeChild(parentElm);

在这里我害怕javascript内存泄漏.

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

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

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

请帮助我在javascript dom操作.

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

如果你的parentElm,child1和child2变量不再在范围内,或者你将它们设置为另一个值,是的.

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

如果你child1和child2变量范围中不再或已将其设置为其他值,是的,删除父是所有你需要做的,除去儿童,让他们能够cleanned起来.

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

这很好,也很常见.

所以这里没有内存泄漏,例如:

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都可以回收.

但是,如果您为这些变量创建一个闭包并保留它,那么这可以使元素在内存中保持比预期更长的时间:

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,但记住它是有用的.

当然,您也可以使用更少的代码创建这些元素:

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

或者在现代浏览器上:

document.body.insertAdjacentHTML(
    'beforeend',
    '
' +
        '
Hello
' +
        '
world
' +
    '
'
);