时间戳

首页 > 解决方案 > 分离的 DOM 树内存泄漏角度

angular - 分离的 DOM 树内存泄漏角度

问题描述

我的应用程序中存在内存泄漏问题，希望你们能提供帮助。检查问题后，我得出的结论是它是由以下代码引起的：

我有几个 html 文件，ngFor用于为数组中的每个对象创建一些 html 代码：

<div class="patient-box level-1" *ngFor="let bed of beds">
  more html..
</div>

在组件中，我订阅了一个 observable，它时不时地发出一个新数组：

updateBeds(purge: boolean) {
  this._beds.next(this.bedsData);
}

这就是我收到新数组时发生的情况：

this.patientService.beds.subscribe(updatedBeds => {
  this.beds = updatedBeds;
  this.sortBeds(this.sortProperty);
});

我认为这里发生的情况是，当我为beds数组分配一个新引用时，删除了其中的所有 html 代码ngFor，然后将为来自 observable 的更新数组中的对象创建新的 html 代码。

问题是当更新到达时被删除的 html 代码似乎没有被垃圾收集。在一段时间内拍摄多个堆快照后，我看到越来越多的分离 DOM 树，其中一些不断增加其保留大小。我在快照中没有看到任何以黄色突出显示的节点，但我有很多红色节点。

我不知道这是否与它有关，但我特别注意到以下代码中有很多红色HTMLInputElement和HTMLImageElement节点ngFor：

<p>
  <img draggable="false" [matTooltip]="translations?.Tooltip.O2" (click)="toggleO2(bed)" [src]="bed.additional_O2 ? medO2 : noO2">
</p>
<input class="jump-button" [matTooltip]="translations?.Tooltip.Jump2" type="image" src="../../assets/images/Jump_1-2.png" (click)="moveBed(bed, 2)">

我现在真的不知道该怎么办。任何帮助深表感谢。谢谢！

标签： angulargoogle-chromememory-leaks

解决方案

推荐阅读