Performance optimizations in Angular
summary
During the GCP Angular migration a systematic audit finds concrete fixes and measured gains: replace detectChanges with markForCheck and use OnPush to cut change detection, avoid ngClass/ngStyle/ngFor where simple bindings or moved ng-template work, limit subscriptions to visible rows for a 50% render-time win, consolidate event listeners to document for ~9% script drop, remove DOM nesting for ~15% faster render, eliminate layout thrashing (one case hides 80% of render time), run timers outside Zone for ~60% improvement, and track regressions with perf gate.
AI-written summary · about
chapters (23)
- 0:00Introduction
- 0:36Google Cloud
- 0:46Migration to Angular
- 1:32Components
- 4:18Usage of builtin Angular directives
- 5:11Iterable differs
- 5:53NG Style
- 6:27NG For
- 7:51NG Template
- 8:46Rxjs
- 9:38PerfGate
- 11:12Output
- 11:27Environment
- 11:55DOM Elements
- 12:35Listeners per Element
- 14:15Layout thrashing
- 17:30Microtasks
- 18:10Passive event listeners
- 19:14Listener will change
- 20:00Visibility
- 20:30Letters Facing
- 20:58Letter Spacing
- 22:00Conclusion
related talks
34mHigh-Performance Applications with Angular
31mAngular Performance: Your App at the Speed of Light
40mNon-trivial optimization techniques in Angular
19mAngular Performance Patterns
19mPerformance Lessons from the World's Largest Angular Application
12mAngular performance pitfalls and how to avoid them
41mHow to Improve Angular 2 Performance?
45mOptimized Angular apps: smaller, faster, better