javascript / expert
Snippet
Hochleistungs-Event-Handling mit Zone-Bypass
Bei hochfrequenten Ereignissen wie 'scroll' oder 'mousemove' kann die standardmäßige Change Detection von Angular, die durch Zone.js ausgelöst wird, zu erheblichen Leistungsengpässen führen. Indem wir den Listener außerhalb der Angular-Zone ausführen, verhindern wir Change-Detection-Zyklen bei jedem Event-Tick und treten erst dann wieder in die Zone ein, wenn eine Statusaktualisierung tatsächlich erforderlich ist.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Component({...})export class ScrollComponent {constructor(private ngZone: NgZone, private el: ElementRef) {}ngOnInit() {this.ngZone.runOutsideAngular(() => {fromEvent(this.el.nativeElement, 'scroll').subscribe(() => {// Heavy calculation hereif (shouldUpdate) {this.ngZone.run(() => { this.state = 'updated'; });}});});}}
angular
Erklärung
1
this.ngZone.runOutsideAngular(() => {
Weist Angular an, den folgenden Block auszuführen, ohne die Change Detection für darin enthaltene asynchrone Aufgaben auszulösen.
2
fromEvent(this.el.nativeElement, 'scroll')
Erzeugt ein Observable aus dem nativen Scroll-Ereignis, das normalerweise bei jedem Tick Zone.js auslösen würde.
3
this.ngZone.run(() => { this.state = 'updated'; });
Tritt explizit wieder in die Angular-Zone ein, um sicherzustellen, dass die Benutzeroberfläche aktualisiert wird, nachdem die Bedingung erfüllt ist.