Angular Material 不释放 DOM 节点/Js 事件监听器

Question

当我访问 Material Components Demo page 并在页面之间切换（例如 Autocomplete 和 Badge）时，我可以在 Chrome 开发工具性能监视器中看到， DOM 节点和 JS 事件监听器的数量不断增加。

例子：

• 我打开Overview（在隐身窗口中，因此没有其他活动的chrome扩展）
  • 在“内存”选项卡上启动垃圾回收 (GC)
  • DOM 节点 ~1800 / JS 事件监听器 ~400
• 现在点击左侧菜单中的 Badge 并开始 GC
  • DOM 节点 ~2400/JS 事件监听器 ~500
• 返回概述并开始 GC
  • DOM 节点 ~3500/JS 事件监听器 ~700

注意：当我们访问多个页面然后启动 GC 时，内存也会增加

垃圾回收不应该释放上一页的 dom 节点吗？
或者这是材料组件库中的内存泄漏（或者可能在演示应用中）？

我问是因为我们在我们的生产应用程序（很大）中也看到了这一点，它似乎对性能产生了严重的影响。

Answer 1

垃圾回收不应该释放上一页的dom节点吗？

是的。垃圾收集器将释放所有不再引用的 DOM 节点。
因此，在运行良好的应用程序/库中，从一个路由切换到另一个路由不应泄漏任何内存，并且Performance monitor 选项卡应显示与以前完全相同的数字。

但是：在某些情况下可能有充分的理由保留对 DOM 节点的引用，例如也许图书馆使用了某种缓存

或者这是材料组件库中的内存泄漏（或者可能在演示应用中）？

也是的。 Material Components 库似乎存在内存泄漏问题： 以下是一些未解决的问题：

• bug: Memory Leaks on several material components ? #19010
• bug(tree): tree memory leak in ivy #22094
• Mat-Dialog: Possible memory leak when dialog includes textarea, input, etc. #20595
• Animations with HostBinding used within Sidenav. Leaks detached DOM nodes #15225
• Ripple DOM elements are not garbage collected #15322
• [Tooltip] Memory leak #8989
• [Sidenav] Memory leak when used inside router-outlet #8862

Angular Ivy 渲染器也会导致内存泄漏：

• ngContext magnifies native Chrome memory leaks #41047

Stackblitz提示：
我无法在 Stackblitz 上重现一些问题（即我在本地看到内存泄漏，但 Stackblitz 上的相同代码有效）。原因是，Ivy 在 Stackblitz 上已停用（但我的本地 ng-cli 默认已激活 Ivy）。我们可以在 Stackblitz 设置中激活 Ivy：

Chrome-Dev-Tools 提示：
在开始垃圾收集之前，我们应该：

• 删除所有断点
• 清空控制台（消息可能包含引用，以防止它们被垃圾收集。
• 避免使用 chrome 扩展：使用隐身窗口，甚至更好的是新的空 chrome 配置文件