儿童最安全、最有效的元素去除

Safest, Most Performant Removal of Element with Children

本文关键字：元素 安全 有效      更新时间：2023-09-26

假设以下标记：

<div id="outterParent">
    <div id="innerParent">
        <div class="children"></div>
        <div class="children"></div>
        <div class="children"></div>
    </div>
</div>

就安全性（避免内存泄漏）和性能而言，可以这样做吗：

var outterParent = document.getElementById("outterParent");
var innerParent = document.getElementById("innerParent");
outterParent.removeChild(innerParent);
outterParent = innerParent = null;

还是最好在移除#innerParent之前移除每个.children元素，如下所示：

var outterParent = document.getElementById("outterParent");
var innerParent = document.getElementById("innerParent");
var child;
while (innerParent.firstChild){
    child = innerParent.firstChild;
    innerParent.removeChild(child);
}
outterParent.removeChild(innerParent);
outterParent = innerParent = child = null;

这取决于情况。如果您在某个地方引用了一个子级，但没有将其删除，则不能对该父级进行垃圾收集。

var child = document.querySelector('children');
document.getElementById("innerParent").remove();
child.parentNode; // #innerParent -> it can't be garbage collected

因此，最好取消子引用，或者删除子引用：

var child = document.querySelector('children');
document.getElementById("innerParent").remove();
child.remove();
child.parentNode; // null -> #innerParent might be garbage collected
相关文章：