Comment provoquer une fuite de mémoire dans une application Angular?

Qu'est-ce que la gestion de la mémoire?

1. Allocation de la mémoire nécessaire.
2. Travailler avec la mémoire allouée, effectuer des opérations de lecture et d'écriture.
3. Libérer de la mémoire une fois qu'elle n'est plus nécessaire.

Comment fonctionne la collecte des ordures?

▍ Phase de drapeau

▍ Phase de nettoyage

Fuites de mémoire angulaire

@Component({
  selector: 'app-root',
  template: `<app-sub *ngIf="hide"></app-sub>`
})
export class AppComponent {
  hide = false;

  constructor() {
    setInterval(() => this.hide = !this.hide, 50);
  }
}

▍ Scénario # 1: énorme pour la boucle

@Component({
  selector:'app-sub',
  // ...
})
export class SubComponent {
  arr = [];

  constructor() {
    for (let i = 0; i < 100000; ++i) {
      this.arr.push(Math.random());
    }
  }
}

▍ Scénario 2: abonnement à BehaviorSubject

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  subject = new BehaviorSubject(42);
  
  constructor() {
    this.subject.subscribe(value => {
        const foo = value;
    });
  }
}

▍ Scénario 3: attribuer une valeur à un champ de classe dans un abonnement

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  subject = new BehaviorSubject(42);
  randomValue = 0;
  
  constructor() {
    this.subject.subscribe(value => {
        this.randomValue = value;
    });
  }
}

Scénarios utilisant le service

@Injectable({
  providedIn: 'root'
})
export class DummyService {

   some$ = new BehaviorSubject<number>(42);
}

▍ Scénario 4: abonnement à un flux et attribution d'une valeur à une constante locale

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  
  constructor(private dummyService: DummyService) {
    this.dummyService.some$.subscribe(value => {
        const foo = value;
    });
  }
}

▍ Scénario 5: abonnement à un service et attribution d'une valeur à un champ de classe

@Component({
    selector:'app-sub',
    // ...
})
export class SubComponent {
  randomValue = 0;
  
  constructor(private dummyService: DummyService) {
    this.dummyService.some$.subscribe(value => {
        this.randomValue = value;
    });
  }
}

HenQuand une fuite de mémoire s'est-elle produite?

Bon travail d'abonnement

@Component({
  selector:'app-sub',
  // ...
})
export class SubComponent implements OnDestroy {

  private destroy$: Subject<void> = new Subject<void>();
  randomNumber = 0;

  constructor(private dummyService: DummyService) {
      dummyService.some$.pipe(
          takeUntil(this.destroy$)
      ).subscribe(value => this.randomNumber = value);
  }

  ngOnDestroy(): void {
      this.destroy$.next();
      this.destroy$.complete();
  }
}

Comment ne pas oublier d'effacer les abonnements?

npm install @angular-extensions/lint-rules --save-dev

{
  "extends": [
    "tslint:recommended",
    "@angular-extensions/lint-rules"
  ]
}

Sommaire