如何解决Angular Material 不释放 DOM 节点/Js 事件监听器
当我访问 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
垃圾回收不应该释放上一页的 dom 节点吗?
或者这是 Material Components 库(或演示应用程序)中的内存泄漏?
我之所以这么问是因为我们在我们的生产应用(很大)中也看到了这一点,而且它似乎对性能产生了严重影响。
解决方法
垃圾回收不应该释放上一页的 dom 节点吗?
是的。垃圾收集器将释放所有不再被引用的 DOM 节点。
因此,在行为良好的应用程序/库中,从一个路由切换到另一个路由不应泄漏任何内存,Performance monitor
选项卡应显示与以前完全相同的数字。
但是:在某些情况下可能有很好的理由保留对 DOM 节点的引用,例如也许库使用某种缓存
或者这是 Material Components 库(或演示应用程序)中的内存泄漏?
还有是的。 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 上的相同代码有效)。原因是,常春藤在 Stackblitz 上被停用(但我本地的 ng-cli 默认激活了常春藤)。我们可以在 Stackblitz 设置中激活 Ivy:
Chrome-Dev-Tools 提示:
在开始垃圾回收之前,我们应该:
- 删除所有断点
- 清除控制台(消息可能包含引用以防止它们被垃圾收集。
- 避免使用 chrome 扩展:使用隐身窗口,甚至更好的新空 chrome 配置文件
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。