chrome堆配置文件中的InternalNode是什么

Question

我正在使用 Chrome DevTools 堆快照工具诊断基于 jQuery 的单页应用程序中的内存泄漏，如 https://developer.chrome.com/docs/devtools/memory-problems/#discover_detached_dom_tree_memory_leaks_with_heap_snapshots

我已经通过这种方式解决了一些问题，但我现在遇到了一个障碍，我无法再确定是什么将对象保留在内存中。例如，对于其中一个对象，它返回以下保留器：

据我所知，该对象被保留，因为它在单击事件的闭包范围内使用。 但是单击事件位于独立的 HtmlDivElement 上，应该对其进行垃圾收集。 它以某种方式通过InternalNode 对象链接到窗口对象。我在互联网上进行了搜索，但我无法找到这些InternalNode对象是什么。

我的问题是，这些InternalNode对象是什么以及如何“释放”它们以便我的对象被垃圾收集。

Answer 1

TL；博士
泄漏是由 https://crbug.com/1177010
造成的 单击分离元素外部的元素可以防止发生内存泄漏。

---

根据 @wOxxOm 的评论，我编译了一个启用了

enable_additional_blink_object_names

标志的 Chromium 版本，以便它显示

InternalNode

对象的名称。 看来

blink:MouseEventManager

正在阻止分离的 dom 元素被垃圾收集。

这最终引导我到https://crbug.com/1177010，我可以通过在拍摄另一个堆快照之前单击分离元素外部来确认。

Answer 2

过去几年这个领域发生了一些变化。截至 2023 年 11 月，这些步骤将为您提供有用的名称，而不是“InternalNode”。

1. 下载 Chrome 进行测试，或使用 GN 构建标志构建您自己的 Chromium

   cppgc_enable_object_names = true

   。
2. 在开发人员工具的“设置”中，在“实验”下，选中标题为“显示在堆快照中公开内部结构的选项”的框。
3. 在开发人员工具的“内存”选项卡中，选中标题为“公开内部结构（包括其他特定于实现的详细信息）”的框。
4. 拍摄堆快照。