Angular *ngIf 内存使用情况

Posted 2023-02-22

【中文标题】Angular *ngIf 内存使用情况

【英文标题】：Angular *ngIf memory usage

【发布时间】：2019-04-27 11:01:06

【问题描述】：

我的观察是否正确，即使 *ngIf 宿主元素不在 DOM 中，它也在内存/堆中。 所以它正在创建宿主元素，但不将其附加到 DOM。

我参与其中是因为我有一个庞大的列表。每个列表元素内部都有一些 *ngIfs。我看到很多分离的节点和内存使用情况。当我删除未使用的 *ngIfs 时，我的内存和分离节点计数器会小得多。

如果是这样，最好的处理方法是什么？ 我需要在运行时决定元素是否有输入、文本、时间选择器字段等。

谢谢。

作为解决方案，如果有人遇到同样的问题： GitHub- ngIf keeps node in memory

【参考方案1】：

我认为你弄错了，我们可以在 angular.io 文档中看到：

NgIf case study:

当条件为假时，NgIf 会从 DOM 中移除其宿主元素，将其与 DOM 事件（它创建的附件）分离，将组件从 Angular 更改检测中分离，并销毁它。 可以对组件和 DOM 节点进行垃圾回收并释放内存。

Why remove rather than hide?:

虽然不可见，但组件——以及它的所有后代 组件——占用资源。性能和内存负担可能是 实质上，响应能力会降低，用户什么也看不到。

【讨论】：

我已阅读文档并看到它。但这不是我在测试期间看到的。所以我搜索了它并在一些博客中读到它不是那样的。 Angular 将其保存在内存中。因此它可以在需要时快速将其附加到 DOM。这就是我不确定的原因。

你为什么不去 angular github 存储库 (github.com/angular/angular/issues) 寻找此类问题，如果没有，请自己问问他们，看看 angular 团队自己要说什么，而不是“邮递员”

可能是因为：不要为一般支持问题打开问题，因为我们希望将 GitHub 问题保留为错误报告和功能请求。你有更好的机会在 Stack Overflow 上回答你的问题，问题应该用标签 angular 进行标记。

@user5931608 如果您认为存在内存泄漏，这听起来像是报告错误的理由。

@user5931608 你举报了吗？如果是，Chrome 团队是怎么说的？