找出导致失控 DOM 节点创建的代码的好方法是什么？答案

【问题标题】：What's a good way to figure out which code is causing runaway DOM node creation?找出导致失控 DOM 节点创建的代码的好方法是什么？
【发布时间】：2012-10-09 14:30:12
【问题描述】：

Chrome 开发工具发现了一些问题similar to those posted here，创建的 DOM 节点比我认为应该给予我的设计选择更多。

找出导致失控的 DOM 节点创建的代码区域的好方法是什么？这些信息确实很有用，但要弄清楚如何处理它似乎远不如处理 CPU 配置文件那么简单。

【问题讨论】：

标签： javascript dom google-chrome-devtools

【解决方案1】：

我建议创建遍历 DOM 并收集有关 DOM 中哪些节点的统计信息的代码（标签类型、类名、id 值、父级、子级数量、textContent 等...）。如果您知道页面中应该包含什么，您应该能够查看此数据转储并确定其中的内容是您不期望的。您甚至可以在页面加载时运行代码，然后在您的页面运行一段时间后再次运行它并比较两者。

【讨论】：

document.getElementsByTagName("*").length 显示稳定的节点数。这是一个 MVC 风格 (Backbone.js) 的问题：我有 render() 方法挂钩来更改事件，其中一个经常渲染和替换自身。
@editor - 你也可以有 DOM 节点，这些节点没有插入到 DOM 中，但已创建，并且对它们的引用存储在 javascript 变量中（这可以防止它们被垃圾收集）。
@jfriend00 你有这样的sn-p或库吗？
@user3919920 - 你可以打电话给document.getElementsByTagName("*")，然后检查你得到的所有标签。例如，您可以计算每种类型的标签数量。目前尚不清楚您要解决的确切问题，因此我建议您在描述确切问题的地方发布您自己的问题。根据您要执行的操作，堆快照也可能很有用。

【解决方案2】：

尝试拍摄两张堆快照（Profiles 面板），一张包含少量 DOM 节点，一张包含大量 DOM 节点，然后比较并查看是否保留了很多节点。如果是，您将能够检测到主保持器。

【讨论】：