javascript / intermediate
Snippet
Optimierung mit NgZone.runOutsideAngular
Angular verfolgt Änderungen über Zone.js. Für hochfrequente Ereignisse, die keine UI-Updates benötigen, verhindert das Ausführen von Code außerhalb der Zone unnötige Change-Detection-Zyklen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
import { Component, NgZone, OnInit, inject } from '@angular/core';@Component({ selector: 'app-perf', template: '' })export class PerfComponent implements OnInit {private zone = inject(NgZone);ngOnInit() {this.zone.runOutsideAngular(() => {setInterval(() => { /* Heavy side effect */ }, 50);});}}
angular
Erklärung
1
private zone = inject(NgZone);
Injiziert den NgZone-Dienst, um mit dem Ausführungskontext von Angular zu interagieren.
2
this.zone.runOutsideAngular(() => {
Führt den Callback aus, ohne die Change-Detection von Angular auszulösen.
3
setInterval(() => { /* Heavy side effect */ }, 50);
Wiederholt eine Aufgabe häufig, ohne den UI-Thread durch Detection-Overhead zu verlangsamen.