ios - Ionic 4.2.1 模态内存泄漏

Question

我一直在用 Ionic 开发一个 kiosk 应用程序，用于 12.9"iPad Pro。这些应用程序启动并运行了几周后，我注意到动画性能(特别是带有 <ion-slides> 元素)在下降并追溯它内存泄漏。我在这个应用程序中使用了两个模态。当任一模态被关闭时，如果我强制进行垃圾收集，然后在 Chrome 开发人员工具中查看内存分配时间线和内存快照，我可以看到模态坐在那里是分离的DOM 元素。每次关闭并重新打开模式时，分配的内存都会变大。其中一个模式相当复杂，具有动态 src <video> 元素和相关的播放控制按钮，但另一个非常简单，包括仅使用 *ngFor 从 json 数据中提取的几个文本元素。

通常情况下，这种内存泄漏不会大到需要担心的程度。您的典型用户永远不会打开和关闭模态足以在合理的时间范围内引起问题。但是，这些 iPad 位于公共(public)场所，每天仅接待数百名用户使用此应用程序。根据我们的忙碌程度，在内存泄漏导致明显问题之前大约需要一周的时间。他们在单一应用程序模式下运行。因此，要重新启动它们，我必须解锁自助服务终端外壳，取回 iPad，将它们连接到我计算机上的配置器，重新启动它们，然后将它们重新安装到外壳中。如果可以避免的话，这并不是我每隔几天就想做的事情。

我在此处和 GitHub 上发现了一些关于类似问题的其他帖子，但没有任何真正的答案。有什么方法可以确保这些模态在被解雇时被正确销毁？

Ionic 不是我的典型开发平台。我通常在 React 工作，但有人决定我们必须为此使用 iPad，尽管我们都告诉他们这是一个糟糕的主意。所以，我也完全有可能是个白痴，而且很明显我在这里遗漏了一些东西。

谢谢!

较简单的代码是...

JS

import { Component } from '@angular/core';
import { NavController, NavParams, Events, ViewController } from 'ionic-angular';
import { CreditsProvider } from '../../providers/credits/credits';

/**
 * Generated class for the CreditsModalPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@Component({
  selector: 'page-credits-modal',
  templateUrl: 'credits-modal.html',
})
export class CreditsModalPage {
  public games = [];
  public ahStaff = [];
  public playCapture = [];

  constructor(private creditsProvider: CreditsProvider, public navCtrl: NavController, public navParams: NavParams, public events: Events, private viewCtrl: ViewController) {
    events.subscribe('timeout', (state) => {
      if (state === 'home') {
        this.viewCtrl.dismiss();
      }
    })
  }

  ionViewDidLoad() {
    this.creditsProvider.getCredits().subscribe((response) => {
      this.games = response.games;
      this.ahStaff = response.ahStaff;
      this.playCapture = response.playCapture;

      //update all staff to not show easter egg
      this.ahStaff.forEach(staff => {
        staff.showNickname = false;
      });
    });
  }

  /*
  * If the staff member has a nickname, toggle the easter egg on and off
  */
  toggleEasterEgg(index) {
    if(this.ahStaff[index].nickname !== null){//if they have a nickname
      //toggle the easter egg
      this.ahStaff[index].showNickname = !this.ahStaff[index].showNickname;
    }
  }
}

HTML

<!--
  Generated template for the CreditsModalPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="dark">
    <ion-title>Credits</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding class="creditsContent">
  <h1>Staff</h1>
  <div class="credit" *ngFor="let staff of ahStaff; let i = index">
    <p (click)="toggleEasterEgg(i)" >{{staff.role + ' - '}}<span [ngClass]="{'glitch': staff.showNickname}" [attr.data-text]="staff.nickname">{{staff.showNickname ? staff.nickname : staff.name}}</span></p>
  </div>
  <h1>Play Capture</h1>
  <div class="credit" *ngFor="let player of playCapture">
    <p>{{player}}</p>
  </div>
  <h1>Games</h1>
  <div class="credit" *ngFor="let game of games">
    <h2>{{game.name}}</h2>
    <p *ngIf="game.year !== null">{{"Year Published - " + game.year}}</p>
    <p *ngIf="game.developer !== null">{{"Developer - " + game.developer}}</p>
    <p *ngIf="game.publisher !== null">{{"Publisher - " + game.publisher}}</p>
    <p *ngIf="game.note !== null">{{game.note}}</p>
  </div>

</ion-content>

Answer 1

您需要退订所有永远不会完成的订阅。

private onTimeout = (state) => {
    if (state === 'home') {
      this.viewCtrl.dismiss();
    };
}

ionViewDidLoad() {
    this.events.subscribe('timeout', onTimeout);
}

ionViewWillLeave() {
    this.events.unsubscribe('timeout', onTimeout);
}