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

Question

Chrome 开发工具发现了一些与此处发布的问题类似的问题，创建的 DOM 节点比我认为应该给予我的设计选择更多。

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

Answer 1

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

Answer 2

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