Angular Material 不释放 DOM nodes/Js 事件侦听器
Angular Material not releasing DOM nodes/Js event listeners
当我访问 Material Components Demo page 并在页面之间切换时（例如 Autocomplete 和 Badge），我可以在Chrome 开发工具性能监视器，DOM 节点和 JS 事件侦听器的数量不断增加。
示例：
- 我打开 Overview（在隐身 window 中，因此没有其他 chrome-扩展处于活动状态）
- 在“内存”选项卡上启动垃圾回收 (GC)
- DOM 节点 ~1800 / JS 事件监听器 ~400
- 现在单击左侧菜单中的 Badge 并启动 GC
- DOM 节点 ~2400/ JS 事件监听器 ~500
- 返回概览并开始 GC
- DOM 节点 ~3500/ JS 事件监听器 ~700
注意：当我们访问多个页面然后启动 GC 时，内存也会增加
垃圾回收不应该释放上一页的 dom-节点吗？
或者这是 Material 组件库（或者可能在演示应用程序中）的内存泄漏？
我问是因为我们在生产应用程序（很大）中也看到了这一点，而且它似乎对性能有严重影响。
Shouldn't a garbage collection free the dom-nodes of the previous page?
是。垃圾收集器将释放所有不再被引用的 DOM-节点。
因此，在行为良好的 application/library 从一条路线切换到另一条路线时，不应泄漏任何内存，并且 Performance monitor 选项卡应显示与以前完全相同的数字。
但是：在某些情况下可能有充分的理由保留对 DOM 节点的引用，例如也许图书馆使用某种缓存
Or is this a memory leak in the Material Components library (or maybe in the demo app)?
还有是。 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 渲染器也会导致内存泄漏：
Stackblitz提示：
我无法在 Stackblitz 上重现一些问题（即我在本地看到内存泄漏，但 Stackblitz 上的相同代码有效）。原因是 Ivy 在 Stackblitz 上被停用了（但我的本地 ng-cli 默认激活了 Ivy）。我们可以在 Stackblitz 设置中激活 Ivy：
Chrome-Dev-Tools提示：
在开始垃圾收集之前，我们应该：
- 删除所有断点
- 清除控制台（消息可能包含引用，这将防止它们被垃圾收集。
- 避免 chrome 扩展名：使用隐身 window 或更好的新空 chrome-profile
当我访问 Material Components Demo page 并在页面之间切换时（例如 Autocomplete 和 Badge），我可以在Chrome 开发工具性能监视器，DOM 节点和 JS 事件侦听器的数量不断增加。
示例：
- 我打开 Overview（在隐身 window 中，因此没有其他 chrome-扩展处于活动状态）
- 在“内存”选项卡上启动垃圾回收 (GC)
- DOM 节点 ~1800 / JS 事件监听器 ~400
- 现在单击左侧菜单中的 Badge 并启动 GC
- DOM 节点 ~2400/ JS 事件监听器 ~500
- 返回概览并开始 GC
- DOM 节点 ~3500/ JS 事件监听器 ~700
注意：当我们访问多个页面然后启动 GC 时，内存也会增加
垃圾回收不应该释放上一页的 dom-节点吗？
或者这是 Material 组件库（或者可能在演示应用程序中）的内存泄漏？
我问是因为我们在生产应用程序（很大）中也看到了这一点，而且它似乎对性能有严重影响。
Shouldn't a garbage collection free the dom-nodes of the previous page?
是。垃圾收集器将释放所有不再被引用的 DOM-节点。
因此，在行为良好的 application/library 从一条路线切换到另一条路线时，不应泄漏任何内存，并且 Performance monitor 选项卡应显示与以前完全相同的数字。
但是：在某些情况下可能有充分的理由保留对 DOM 节点的引用，例如也许图书馆使用某种缓存
Or is this a memory leak in the Material Components library (or maybe in the demo app)?
还有是。 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 渲染器也会导致内存泄漏：
Stackblitz提示：
我无法在 Stackblitz 上重现一些问题（即我在本地看到内存泄漏，但 Stackblitz 上的相同代码有效）。原因是 Ivy 在 Stackblitz 上被停用了（但我的本地 ng-cli 默认激活了 Ivy）。我们可以在 Stackblitz 设置中激活 Ivy：
Chrome-Dev-Tools提示：
在开始垃圾收集之前，我们应该：
- 删除所有断点
- 清除控制台（消息可能包含引用，这将防止它们被垃圾收集。
- 避免 chrome 扩展名：使用隐身 window 或更好的新空 chrome-profile