🎯 Angular Performance – ChangeDetection, Signals & Zonenfrei

Wenn deine Angular-App langsam wirkt, ist es fast nie der Code selbst – sondern wie Angular ihn verarbeitet.

In diesem Beitrag zeige ich dir:

• Wie du ChangeDetection strategisch einsetzt
• Wie Signals dir bei Performance helfen
• Und wie du mit zone-less richtig durchstartest

🔄 ChangeDetection – Default vs. OnPush

🚨 Default (standardmäßig)

• Angular checkt die ganze Komponente + Kinder
• Oft zu viel, besonders bei großen UIs

✅ OnPush

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})

• Checkt nur bei @Input()-Änderung oder Observable mit async
• Weniger DOM-Checks = mehr Speed

⚡ Signals – Granularer, reaktiver

readonly name = signal('Ada');

readonly greeting = computed(() => `Hello ${name()}`);

➡ Kein Zone-Trigger nötig
➡ Kein ChangeDetectorRef.detectChanges()
➡ Nur echte Änderungen lösen Updates aus

🧠 Manual Trigger mit runOutsideAngular

this.zone.runOutsideAngular(() => {
  // DOM-heavy logic z. B. animation, canvas
});

➡ Keine unnötigen ChangeDetection-Cycles mehr

🧱 Beispiel: Zonenfreies Setup

bootstrapApplication(AppComponent, {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true })
  ]
});

• Nutze @angular/core experimentelle API
• Ideal für High-Performance UIs
• Kombinierbar mit Signals

🧩 Weitere Performance-Tipps

• trackBy bei *ngFor IMMER verwenden
• Lazy Load von Modulen und Komponenten
• IntersectionObserver statt *ngIf für sichtbare Bereiche
• Virtual Scroll für große Listen

🧪 Tools zum Messen

• Chrome DevTools → Performance Tab
• Lighthouse Reports
• Angular DevTools → ChangeDetection + Component Tree

✅ Fazit

Angular ist nicht langsam.
Aber du brauchst die richtigen Tools, um das Maximum rauszuholen:

• 🧠 Signals für Reaktivität
• 🧩 OnPush für Effizienz
• ⚡ Zonenfreiheit für volle Kontrolle

📍 Bald im Blog: 📚 Architektur-Playbook – Wie du Angular-Projekte von Anfang an sauber aufsetzt