43

我得到一个“啊，啪！” 加载某个网页时 chrome 崩溃。我正在尽我所能找出导致它的原因并且非常困难。

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

Dom 节点数增加

我理解这意味着我页面上的 DOM 元素数量正在增加，但在完成之后

document.getElementsByTagName("*").length

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

那么 DOM 节点计数图实际显示的是什么？如果它继续像这样增加，那可能是“啊，啪！”的原因。碰撞？

4

2 回答 2

36

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

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

于 2012-06-18T13:25:58.550 回答
6

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

于 2017-02-03T11:32:49.033 回答