performance - 为什么一些分离的 DOM 与作为保留对象的原生 HTML 元素有未知的距离？

Question

我注意到一些分离的 DOM 有未知的距离，而保留器有类似 native in HTMLAnchorElement 的东西。并且这些保留器不是实时的，也没有显示任何 javascript 引用。为什么距离看起来为零 -对于这些分离的 DOM。分离的 DOM 也显示 [3404] in (Global handles) @29 , [13] in (GC roots) @3在保持器树中。我可以摆脱这个分离的 DOM 的可能方法是什么。附上macOS Chrome heapsnapshot的Detached DOM截图。
Screenshot of Detached DOM of unknown Distance和
Screenshot of Retainers showing Global handles and GC roots

Answer 1

迟到的答案，但我也浪费了很多时间来解决这个问题。所以希望这可以帮助其他面临类似问题的人。

只需运行 调试工具中控制台内的 clear() ，并拍摄另一个快照。 (还要确保您没有设置任何断点)

为什么这会起作用？我会让谷歌解释一下:

Sometimes objects may be retained by debugger context and DevTools console (e.g. after console evaluation). Create heap snapshots with clear console and no active breakpoints in the debugger.

(来自: https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101)