编辑:有关该错误的相关问题和信息,请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=707544。
从现在开始不必回答这个问题,但保留问题以供参考。
Element.getElementsByTagName 在 Chrome 中返回 HTMLCollection。
它阻止 GC 收集被调用或引用的元素。
尽管在 Detached DOM 树中没有发现任何内容,但节点数(可能还有堆大小)意外增加。
下面演示了在下面提供代码的页面中单击按钮和强制GC 交替的结果。(Major GC/DOM GC 后堆大小下降,但节点计数不下降)
以及第一次分配和强制GC后的内存信息。
在我看来,那些 HTMLCollection 可能充当缓存/占位符。由于其父元素是一个临时元素,因此即使删除和收集了这些元素,也会保留不必要的 HTMLCollection 副本。
在 Win10 中的 Chrome 57.0.2987.133 和 Chromium 59.0.3058.0 上观察到。
可重现的代码:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="content"></div>
<input type="button" id="button">
<script type="application/javascript">
var button = document.getElementById('button');
button.addEventListener('click', function() {
var content = document.getElementById('content');
for (var i = 0; i < 2000; i++) {
var el = document.createElement("div");
//var no_leak = el.querySelectorAll('SPAN'); // NodeList
var leak = el.getElementsByTagName('SPAN'); // HTMLCollection
content.appendChild(el);
el.remove();
}
});
</script>
</body>
</html>