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

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