28.7.2021 |

Notizen zum Webinar "Angular-Performance: So zünden Sie den Turbo"

Hier sind ein paar Notizen zum (kostenlosen) Webinar Angular-Performance:

Was in zwei Sekunden nicht lädt, wird nie wieder aufgerufen: Die Erwartung von Anwendern an die Performance von Webanwendungen nimmt stetig zu. Nach dem Laden einer Webanwendung muss sich diese schnell und flüssig anfühlen, damit der Anwender sein Ziel erreichen kann. Im Webinar zeigt Ihnen Christian Liebel mit Zone.js, Change Detection und Service Workern die wichtigsten Performance-Stellschrauben des Angular-Frameworks, damit Sie auch für Ihre Angular-App den Turbo zünden können.

Runtime-Performance

nötige Berechnungen zur Laufzeit reduzieren
im Angular-Umfeld: Change Detection gering halten

Change Detection & NgZone

Change Detection läuft über eine Baumstruktur, welche von oben nach unten komplett durchläuft (uni-direktional)
Anzahl der Bindings reduzieren
vermeide Bindings zu rechen-intensiven Funktionen und Getters
Chrome DevTools Angular: Profiler Tab
Zone.js: derzeit noch absolute Abhängkeit von Angular: bietet einen Ausführungskontext ("execution context") für asynchrones JavaScript & einen meta-monkey patch
dient dazu, sich in Browser-Ereignisse einzuklinken, z.B. setTimeout, setInterval aber auch addEventListener, click, focus oder XMLHttpRequest oder geolocation.getCurrentPosition
Zone.js (NgZone) fängt asynchrone Operationen von der Angular Appplikation ab und löst dann einen Change Detection Cycle aus
Probleme: lange Change-Detection-Cycles in Kombination mit hochfrequenten Ereignissen (z.B., scroll, requestAnimationFrame, mousemove)
es gibt Wege, aus der Zone.js auszusteigen, z.b. mit "Disable patches" (polyfill.ts)

Change Detection Strategies

default: nutzt Zone.js
OnPush: Change Detection reagiert nur auf Veränderungen der @Input Parameter (bedenke, dass Angular Werte via Object.is vergleicht!)
nutze in diesem Zusammenhang möglichst die Async Pipe, da sie automatisch von Observables unsubscribed und markForCheck() bei jedem Update auslöst, so dass Model und View synchron bleiben