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 auchaddEventListener, click, focus
oderXMLHttpRequest
odergeolocation.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 viaObject.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
Ladezeit-Performance
- Lazy Loading
- Service Worker
Service Worker
- erlaubt es Daten, lokal zu cachen
- bei Angular relativ einfach zu aktivieren mit
ng add @angular/pwa