Optimierung externer Bibliothekslogik außerhalb von NgZone

Snippet

Optimierung externer Bibliothekslogik außerhalb von NgZone

NgZone (Zone.js) fängt asynchrone Operationen ab, um die Änderungserkennung auszulösen. Das Ausführen von Hochfrequenz-Logik (wie Mausbewegungen oder Chart-Animationen) innerhalb von 'runOutsideAngular' verhindert unnötige globale Change-Detection-Zyklen und verbessert die Reaktionsfähigkeit der Anwendung bei der Integration von Nicht-Angular-Bibliotheken erheblich.

snippet.js
javascript
@Component({ ... })
export class ChartComponent implements OnInit {
  constructor(private zone: NgZone, private el: ElementRef) {}
 
  ngOnInit() {
    this.zone.runOutsideAngular(() => {
      // Third-party library doing heavy DOM manipulation or timers
      const chart = new HeavyChartLibrary(this.el.nativeElement);
      chart.on('render', () => {
         console.log('Rendering...');
      });
    });
  }
}

angular

Erklärung

this.zone.runOutsideAngular(() => { ... })

Führt den Codeblock aus, ohne den Änderungserkennungsmechanismus von Angular auszulösen.

new HeavyChartLibrary(...)

Stellt sicher, dass interne Timer/Events der Bibliothek nicht den UI-Check der gesamten App aufwecken.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

Verwandt

Aus deiner Bibliothek