前端之家

  1. 首页
  2. 问答

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

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

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

垃圾回收不应该释放上一页的 dom 节点吗？
或者这是 Material Components 库（或演示应用程序）中的内存泄漏？

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

youpegn 回答：Angular Material 不释放 DOM 节点/Js 事件监听器

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

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

但是：在某些情况下可能有很好的理由保留对 DOM 节点的引用，例如也许库使用某种缓存

或者这是 Material Components 库（或演示应用程序）中的内存泄漏？

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

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

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

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

  • 删除所有断点
  • 清除控制台（消息可能包含引用以防止它们被垃圾收集。
  • 避免使用 chrome 扩展：使用隐身窗口，甚至更好的新空 chrome 配置文件
angularangular-materialgoogle-chrome-devtoolsmaterial-components-webmemory-leaks
本文链接：https://www.f2er.com/810693.html

大家都在问