0

编辑:有关该错误的相关问题和信息,请参阅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>
4

1 回答 1

0

尝试使用分配时间表。请参阅使用分配时间线识别 JS 堆内存泄漏。这是一种内存分配的实时可视化。

于 2017-03-31T19:55:11.440 回答