javascript - Angular:垃圾收集组件
问题描述
我试图了解 GabageCollector 在组件被销毁后是如何工作的。我有以下情况:
应用组件:
export class AppComponent {
testCompoments = [1,2];
removeOne(id){
this.testCompoments.pop()
}
nop(){
}
}
应用HTML:
<ng-container *ngFor="let t of testCompoments">
<app-test [id]="t" (close)="removeOne($event)"></app-test>
</ng-container>
<br>
空 FN
测试组件:
export class TestComponent implements OnInit {
@Output()
public close = new EventEmitter()
@Input()
id;
constructor() { }
ngOnInit() {
}
closeClick(){
this.close.emit(this.id)
}
}
测试HTML:
<p>{{id}}</p>
<button (click)="closeClick()">close</button>
现在,当我启动应用程序并拍摄堆快照时,我会看到内存中正确数量的对象:
令我惊讶的是,还有两个对象?现在另外奇怪的是,如果我单击“EMPTY FN”按钮,它什么都不做(应用程序组件上的空功能),下一个快照如下所示:
关于这个话题,我有几个问题:
- GC 的详细工作原理是什么?对于我的特殊情况,我认为 GC 无法释放内存,因为仍然有对该对象的引用。如何找出这个引用的位置?
- 为什么在删除第一个组件后不调用GC,但如果随后调用空函数则调用GC?
- 我是否必须关心这个“死”对象(假设 testcomponent 订阅了一些 observables 但通过 async-pipe 或在 ngOnDestroy 中正确取消订阅它们)?
解决方案
Chrome 似乎在内存中为 ngFor 保留了一个实例。内存泄漏并不像看起来那么严重。
https://angular-garbage-collection-components.stackblitz.io/
通过比较 Chrome 上的快照:
- 单击最后一个“关闭”,它将从 DOM 中删除元素,但出于某种奇怪的原因将其保留在内存中。
- 单击第一个“关闭”,它将从 DOM 中删除元素,并且不会发生内存泄漏。
- 通过单击“关闭”删除最后一个 TestComponent 将在内存中留下一个 TestComponent。
- 内存中的 TestComponent 计数永远不会超过 DOM 中的项目数。
- 当我添加新的 TestComponents 时,额外的项目被清理并且没有可检测到的内存泄漏。
参考代码: https ://stackblitz.com/edit/angular-garbage-collection-components
推荐阅读
- javascript - 无法 POST 成功的 ajax 请求
- mysql - 使用聚合函数 mySQL 时不断出现错误
- git - 如何在 Mac 上使用 Git 和 NPM 安装此软件
- php - Symfony Doctrine 捕获连接异常
- java - 从另一个容器内的 Java 应用程序引用 docker 容器内的 MySQL 服务器
- reactjs - 我应该构建一个本地数据层/应用程序状态来维护 React Native/Firestore 应用程序中的状态吗?
- batch-file - 批处理:批处理文件终止时关闭可执行文件
- r - 是否有映射日期索引的 R 函数?
- google-colaboratory - 防止 Google Colab 进程断开连接
- react-native - 世博常量 deviceId 和 installationId 未定义