performance - 谷歌浏览器的开发者工具时间线内存 View 中的 DOM 节点计数是多少？

Question

我收到“噢，啪!”加载某个网页时，chrome 崩溃。我正在尽力找出造成这种情况的原因，但遇到了很大的困难。

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

我理解这意味着我的页面上的 DOM 元素计数在增加，但是在执行完之后

document.getElementsByTagName("*").length

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

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

Answer 1

DOM 节点计数图显示了仍保留在内存中(即尚未被垃圾收集)的已创建 DOM 节点的数量。这不必与通过 getElementsByTagName 获取的元素一致。后者也只会获取实际附加到文档树的元素。它不会获取您仍然引用的任何“离线”项目。

陷入这种特殊金字塔增长的一个简单方法是 Facebook API 中的 Like 小部件，它包含失控计时器上的一些代码，可创建大量额外的 DOM 节点。