Google Chrome的开发人员工具时间轴内存视图中的DOM节点数是多少？

Question

我得到了一个“喔，快！”加载某个网页时出现chrome崩溃。我正在尽力弄清楚造成它的原因并且真的很难。

在Chrome开发者的工具中有一个内存选项卡，当查看计数器图表时，我注意到DOM节点计数行逐步上升，下降，然后继续上升。

我理解这意味着我的页面上的DOM元素数量正在增加但是在执行

之后

document.getElementsByTagName("*").length

在控制台中我注意到值没有改变。

那么DOM节点计数图实际显示的是什么？如果它继续这样增加，那可能是“Aw，snap！”的原因。崩溃？

Answer 1

DOM节点计数图显示了仍保留在内存中的已创建DOM节点的数量，即尚未进行垃圾回收的DOM节点数。这与您通过getElementsByTagName获得的元素不一致。后者也只会获得实际附加到文档树的元素。它不会获得您仍然有参考的任何“离线”项目。

一种容易受到这种特殊金字塔增长影响的方法是来自Facebook API的Like小部件，其中包含一些计算机上的一些代码，这些代码可以创建大量额外的DOM节点。

Answer 2

仍保留在内存中的DOM节点是所谓的分离节点。这意味着它们不会显示在页面的DOM树中，但某些JavaScript代码仍会在某处引用它们。阅读这篇谷歌开发工具文章，解释使用简单代码分离DOM节点的内容以及如何使用Chrome DevTools检测它：https://developers.google.com/web/tools/chrome-devtools/memory-problems/