Я разрабатываю приложение для киоска с Ionic для использования на 12,9 "iPad Pro. После их запуска в течение нескольких недель я заметил снижение производительности анимации (особенно с элементом <ion-slides>) и проследил ее из-за утечки памяти. В этом приложении я использую два модальных режима. Когда какой-либо модальный режим отклонен, если я принудительно собираю мусор, то просматриваю временную шкалу выделения памяти и снимки памяти в инструментах разработчика Chrome. Элементы DOM. Каждый раз, когда модал закрывается и открывается заново, выделенная память становится чуть-чуть больше. Один из этих модалей довольно сложный с динамическим элементом src <video> и соответствующими кнопками управления воспроизведением, а другой довольно простой, состоящий из только несколько текстовых элементов, извлеченных из данных json с использованием * ngFor.
Обычно эта утечка памяти не будет достаточно большой, чтобы о ней беспокоиться. Ваш обычный пользователь никогда не будет открывать и закрывать модалы настолько, чтобы вызвать проблемы в разумные сроки. Но эти iPad находятся в публичном пространстве и каждый день получают сотни пользователей только этого приложения. В зависимости от того, насколько мы заняты, требуется около недели использования, прежде чем утечки памяти вызовут заметные проблемы. Они работают в режиме одного приложения. Таким образом, чтобы перезапустить их, мне нужно разблокировать корпус киоска, извлечь 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>