Wie kann ein Speicherverlust in einer Angular-Anwendung verursacht werden?

Was ist Speicherverwaltung?

1. Zuweisung des erforderlichen Speichers.
2. Arbeiten Sie mit zugewiesenem Speicher und führen Sie Lese- und Schreibvorgänge aus.
3. Speicher freigeben, nachdem er nicht mehr benötigt wird.

Wie funktioniert die Speicherbereinigung?

▍ Flaggenphase

▍ Reinigungsphase

Winkelspeicherlecks

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

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

▍ Szenario 1: große for-Schleife

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

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

▍ Szenario 2: BehaviorSubject-Abonnement

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

▍ Szenario 3: Zuweisen eines Werts zu einem Klassenfeld innerhalb eines Abonnements

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

Szenarien, die den Dienst verwenden

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

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

▍ Szenario 4: Abonnieren eines Streams und Zuweisen eines Werts zu einer lokalen Konstante

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

▍ Szenario 5: Abonnieren eines Dienstes und Zuweisen eines Werts zu einem Klassenfeld

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

▍Wann ist ein Speicherverlust aufgetreten?

Ordnungsgemäße Abonnementarbeiten

@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();
  }
}

Wie kann man daran denken, Abonnements zu löschen?

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

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

Zusammenfassung