Question

我创建了一个非常简单的页面：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id='div'></div>
</body>
</html>

然后我在Chrome中打开它，运行时间轴，我看到节点数：9 。然后我执行document.getElementById('div').innerHTML = ''并注意到节点数：10 。

注1：重新启动时间轴

后，节点数再次变为9

注2：如果多次执行document.getElementById('div').innerHTML = ''，节点数从9跳到10再回到9：

10 nodes at the timeline

有人可以解释为什么document.getElementById('div').innerHTML = ''会导致创建新节点吗？为什么不是总是通过GC收集它？清理节点内容的其他（更好）方法是什么？

Answer 1

我已经在chrome 33中对此进行了测试。实际上，有9个初始节点：

#document
    doctype
    html
        head
        #text
        body
            #text
            div
            #text

如果我执行

var div = document.getElementById('div');
div.innerHTML = '';

没有特别的事情发生。

div.childNodes;

返回一个空的NodeList。但如果我写

div.innerHTML = ' '; //<- with space

然后创建一个新节点。

如果我多次执行该操作，节点数会增加然后突然减少。原因？每次删除节点时都不会发生垃圾收集过程（这样效率很低）。 Chrome的V8具有用于年轻代对象的保留堆。仅当此空间已满时才会进行垃圾收集，删除未使用的对象并将其他对象提升到旧一代堆。

Answer 2

向igalia的人询问了这个问题，简短的回答是“它是创建的，因为在JavaScript的以下部分中，可能会引用它。”
因此，JavaScript可能会引用DOM节点以使用计算值填充它。因此，为什么很难优化这一点。只有在读取并执行了所有JavaScript代码后才能进行优化。因此，为什么从空DOM节点开始更容易。

清空innerHTML会增加DOM节点的数量

2 个答案: