如何使用 Chrome 开发工具（.. 或任何其他工具）可靠地识别 Web 应用程序中泄漏的 DOM 节点？答案

【问题标题】：How to reliably identify leaking DOM nodes in a web app with Chrome Dev Tools (.. or any other tool)?如何使用 Chrome 开发工具（.. 或任何其他工具）可靠地识别 Web 应用程序中泄漏的 DOM 节点？
【发布时间】：2018-11-21 20:44:47
【问题描述】：

例如，这些快照和性能配置文件是使用 Chrome 开发工具生成的，如下所示：

在 macOS 10.13.4 上使用 Chrome 66.0。关闭所有 Chrome 扩展程序，禁用所有控制台日志记录，以隐身模式运行。

GC 几次
拍摄快照 #1
开始性能分析
做 3 次
GC 几次
做 3 次
GC 几次
..等很久，让监听器GCd..
GC 几次
停止性能分析
拍摄快照 #2

我可以在性能配置文件中的节点计数每次增加相同数量的情况下一致地重现该问题。

为什么 Performance Profile 显示节点数永远不会回到原来的水平，而 Snapshots 却没有显示任何新节点？

有什么方法（无需反复试验）可以找到这些节点是什么？

Firefox（或其他浏览器或工具）是否有任何类似的工具来检测泄漏节点？

【问题讨论】：

标签： javascript html dom memory-leaks garbage-collection

【解决方案1】：

解决方案是升级到 Chrome Canary（现在可以使用 v69.0），在 GC 之后节点计数恢复到原始水平。

Chrome v66.0 显然在保持节点数方面存在一些问题。稳定版 Chrome 也刚刚为我升级了自己，v67.0 也有同样的问题。

【讨论】：