Profiling Angular apps like a Shark
summary
Browser rendering must meet RAIL budgets: 16 ms per frame, response <50 ms, animation <10 ms, load <5 s. Use DevTools Performance tab (record, bottom-up view) in refresh in Incognito to find hotspots: a decimalToHex utility runs repeatedly and cuts a 4 s load toward 1 s when replaced by CSS rgb, console.log costs 195ms during profiling, and hundreds of ngCheck runs vanish when components use change detection OnPush. Unsubscribe observables (ngOnDestroy) to avoid accumulating subscriptions and memory leaks.
AI-written summary · about
chapters (10)
- 0:00Start
- 2:32About Me
- 4:08Refresh Rates
- 5:00Shipping a frame to screen
- 9:03RAIL Model
- 10:33DevTools Performance Tab
- 17:59Profiling Process
- 21:38Memory Leaks
- 22:06Type of Common JavaScript Leaks
- 25:15Summary
related talks
32mProfiling Bootstrap Performance of Angular Apps
59mProfiling JavaScript Like A Pro
31mAngular Performance: Your App at the Speed of Light
20mAngular Performance in the Enterprise
19mAngular Performance Patterns
23mPerfecting Your Profiling
20mTools for Fast Angular Applications
20mProfiling React Web Apps in Production