gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:17:58 25 4
gpt4 key购买 nike

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

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

然后我在 Chrome 中打开它,运行 Timeline,我看到了Number of nodes: 9。然后我执行了 document.getElementById('div').innerHTML = '' 并注意到 Number of nodes: 10

注1:重启Timeline后节点数又变成9

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

10 nodes at the timeline

有人可以解释为什么 document.getElementById('div').innerHTML = '' 导致创建新节点吗?为什么它并不总是由 GC 收集?清除节点内容的其他(更好)方法是什么?

最佳答案

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

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

如果我执行

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

没有什么特别的事情发生。

div.childNodes;

返回一个空的节点列表。但是如果我写

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

然后创建一个新节点。

如果我多次执行该操作,节点数会增加然后突然减少。原因?垃圾收集不会在每次删除节点时都发生(这将是非常低效的)。 Chrome 的 V8 有一个为新生代对象保留的堆。只有当此空间已满时,才会发生垃圾收集,删除未使用的对象并将其他对象提升到老年代堆。

关于javascript - 清空 innerHTML 会增加 DOM 节点的数量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22486030/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com