Angular Runtime Performance Optimization

This slide deck, presented by Alexander Thalhammer, provides a comprehensive overview of Angular runtime performance optimization techniques, focusing on efficient ChangeDetection, mitigating zone pollution from third-party libraries, and enhancing component rendering. It covers practical strategies—such as leveraging OnPush ChangeDetection, Angular pipes, and RxJS subscription management—to help developers measure, tweak, and improve performance in web applications built with Angular.

Transcript

1. AngularArchitects.io | @ManfredSteyer Alexander Thalhammer | @LX_T Angular Runtime Performance Optimization https://github.com/L-X-T/ng-days-2024
2. About me …
3. My office ☺
4. Hi, it's me → @LX_T • Alex Thalhammer from Graz, Austria (since 1983) • Angular Software Tree GmbH (since 2019) • WebDev for 22+ years (I‘ve come a long way baby) • WordPress Dev (Web, PHP & jQuery, 2011 - 2017) • Angular Dev (Web, TS, Rx since 2017 - NG 4.0.0 ☺) • Angular Evangelist, Coach & Consultant (since 2020) • Member of Angular Architects https://www.angulararchitects.io/ https://alex.thalhammer.name/
5. Pollings • OS • Mobile OS? • Browser • IntelliJ/WebStorm vs VS Code
6. Pollings • Which framework is the fastest? • Do you prefer demos or labs?
7. About this workshop …
8. My Goals You should • understand the importance of good performance • know how to measure the performance • know how to tweak the performance • become a performance evangelist in her/his project/team/company
9. We work together • Don’t hesitate to interupt me at ANY TIME • questions • remarks or • any other feedback ☺ • Somebody else might have the same question • Be a hero and ask it • Seriously, it makes the workshop better for all of us ☺ • After the workshop please also share feedback ☺
10. Timetable (approx.) • 09:00 – 10:30 • 1/2h break • 11:00 – 12:30 • 1h break • 13:30 Initial Load Optimization ☺
11. Agenda Change Detection Change Detection NG 17 syntax @for track Virt. Scrolling, UX, RxJS
12. What is Performance? • What did you say? • Web performance refers to the speed in which web pages are downloaded and displayed on the user's web browser. Web performance optimization (WPO), or website optimization is the field of knowledge about increasing web performance. -- https://en.wikipedia.org/wiki/Web_performance
13. Why Performance Optimization?
14. Angular Performance Optimization WTF?
15. Angular Performance Optimization We distinguish between • Initial load performance (classical web performance) • Runtime performance (during usage, e.g. scrolling frame rate)
16. Starter Kit • Incl. Slides • And Labs (exercises) • Clone from https://github.com/L-X-T/ng-days-perf-2024
17. Ready for Takeoff! • What are your questions?
18. AngularArchitects.io | @ManfredSteyer Alexander Thalhammer | @LX_T Runtime Performance Change Detection
19. Outline - Runtime Performance • Change Detection • Further Best Practices
20. Outline - Change Detection • Out of bound change detection • Zone pollution by 3rd party libs • Optimization with state or flags • Optimization with Angular Pipes
21. Out of bound change detection • Problem: Local state change triggers change detection in other comps E.g. Input field keydown triggers CD in other components • Identify: • Use the infamous blink() or • Angular DevTools Profiler • console.log() in change detection lifecycle hook (e.g. ngDoCheck) • Solution: ChangeDetectionStrategy.OnPush as default
22. Change Detection in Angular
23. Demo Change Detection
24. Change Detection
25. DOM Rendering Model Template DOM
26. Change Detection • 1.) User or App changes the model (e.g. input, blur or click) • 2.) NG CD checks for every component (from root to leaves) if the corresponding component model has changes and thus its view (DOM) needs to be updated • 3.) If yes then update / rerender the component’s view (DOM)
27. Change Detection – From Root To Leaves Img src: https://mokkapps.de/blog/the-last-guide-for-angular-change-detection-you-will-ever-need/
28. Change Detection – Rerender Components before rerender after rerender content after rerender view
29. Demo Default Strategy & Blink
30. Digression – what triggers CD? • browser events (click, focus, blur, keyup, etc.) • XMLHttpRequests (AJAX / HttpClient) • setTimeout() and setInterval() • often used as a "hack" to trigger CD • "I have no clue how this works" • Websockets
31. Performance- Tuning with OnPush
32. Change Detection – OnPush Strategy Angular just checks when “notified” Img src: https://mokkapps.de/blog/the-last-guide-for-angular-change-detection-you-will-ever-need/
33. Activate OnPush Strategy @Component({ […] changeDetection: ChangeDetectionStrategy.OnPush }) export class FlightCardComponent { […] @Input({ required: true }) flight!: Flight; }
34. Demo OnPush Strategy
35. Change Detection
36. "Notify" about change? • 1 Change bound data (@Input) • OnPush: Angular just compares the object reference! • e. g. oldFlight !== newFlight (BTW: like ngOnChanges) • 2 Raise event within the component and its children (e.g. @Output) • 3 Emit in a bound observable into the async pipe | or update a signal • {{ flights$ | async }} | {{ flightsSignal() }} • 4 Do it manually (cdr.markForCheck()) • Don't do this at home ;-) • But there are reasonable cases (where we can neither use 1 nor 3)
37. CDR - markForCheck() vs detectChanges() • Use CDR.markForCheck() to notify the next CD cycle if using OnPush • Useful when you're bypassing the ChangeDetectionStrategy.OnPush e.g. by mutating some data or you’ve just updated the components model • Use CDR.detectChanges() to trigger CD immediately for this view and it’s children respecting the its/their CD strategy • Useful when you've updated the model after angular has run it's change detection, or if the update hasn't been in Angular world at all • For the whole app (from root) you can do ApplicationRef.tick()
38. Set OnPush as default • Add to angular.json / project.json schematic "@schematics/angular:component": { "style": "scss", "changeDetection": "OnPush" } • Add an ESlint rule "@angular-eslint/prefer-on-push-component-change-detection": "warn" • OnPush in every component? • well yes, but • optional in smart components (and root)
39. Thought experiment • What if <app-flight-card> would handle use case logic? • e.g. communicate with API • Number of requests ==> Performance? • Traceability? • Reusability? Page ▪ 39
40. Smart vs. Dumb Components Smart / Controller •1 per feature / use case / route •Business logic •Container Dumb / Presentational •Independent of Use Case •Reusable •Often Leafs Page ▪ 40
41. Zone pollution by 3rd party libs (charts)
42. Demo Zone Pollution
43. Zone pollution by 3rd party libs (charts) • Problem: Callbacks that trigger redundant change detection cycles • Identify: Use the infamous blink() or the Angular DevTools Profiler • E.g. MouseEvent listeners • requestAnimationFrame() or • setTimeout() • Solution: Run outside of NG Zone • Inject (private ngZone: NgZone) • Call this.ngZone.runOutsideAngular(() => doStuff) • https://angular.io/guide/change-detection-zone-pollution • Alternative: Using cdr.detach() for components
44. Demo Fixed Zone Pollution
45. ChangeDetectorRef API, once more Img src: https://www.telerik.com/blogs/simplifying-angular-change-detection/
46. Lab 03a Runtime Performance – Change Detection
47. Optimization with state or flags • Problem: Redundant calculations for conditions • Identify: Methods being executed in *ngIf / @if statements • Solution: Use (simple) State Management (e.g. Subjects or use boolean flags) or strings, that only change when they should
48. Derail – what's the purpose of? Services Directives Pipes?
49. Optimization with Angular Pipes • Problem: Redundant calculations / transforming / formatting • Identify: Methods being executed in string interpolations in the template or similar things slowing change detection cycles • Solution: Use (pure) Angular Pipes
50. Demo Pipes
51. Recap • Out of bound change detection • Zone pollution by 3rd party libs • Optimization with state or flags • Optimization with Angular Pipes
52. Questions?
53. References • Minko Gechev (@mgechev) for Angular on YouTube • https://www.youtube.com/watch?v=FjyX_hkscII • https://www.youtube.com/watch?v=f8sA-i6gkGQ • New in NG 17, 18+: https://www.youtube.com/watch?v=2M17gRQbgfI • Resolving Zone Pollution • https://angular.io/guide/change-detection-zone-pollution • Angular Performance Optimization using Pure Pipe • https://www.youtube.com/watch?v=YsOf90RZfss
54. AngularArchitects.io | @ManfredSteyer Alexander Thalhammer | @LX_T Runtime Performance Further Best Practices
55. Outline - Runtime Performance • Change Detection • Further Best Practices
56. Outline • Use track in @for if possible • Avoid large component trees • Use Spinners and preview thumbs • Optimistic updates • Bonus: RxJS Subscription Management
57. Handling large ng for loops
58. Using trackBy in *ngFor • Problem: Angular replaces all items in *ngFor upon changes • Identify: Easy - search for "*ngFor" • Solution: Use the trackBy function
59. Performance benchmark https://krausest.github.io/js-framework-benchmark/current.html
60. Using track in @for • Automatically required @for (flight of flights; track flight.id) { [...] } @empty { No flights found. }
61. Demo for track
62. Avoid large component trees • Problem: Too many (100+) components are loaded • Identify: Lots of components slowing down frame rate • Solution: On demand component rendering • E.g. Pagination or Angular CDKs <cdk-virtual-scrolling-component>
63. Demo Virtual Scrolling
64. Other UX improvements
65. Spinners & Preview Thumbs Twitter / Insta / …
66. Use Spinners and preview thumbs • Problem: App waits for backend before showing content • Identify: Waiting for API data to show a view (page) • Solution: Show view (page) immediately • Show spinners to indicate data is still loading • Even more sophisticated: show preview images (used everywhere on big platforms!)
67. Optimistic Updates E.g. Like Buttons
68. Optimistic Updates • Problem: App waits for backend for confirmations • Identify: Spinner showing when clicking on save • Solution: Confirm action immediately • Go back in case of an error (e.g. no network)
69. Why asynchronicity? Asynchronous operations (API requests) Interactive behavior (user input) Websockets Server Send Events (Push)
70. Which solution? RxJS Signals
71. Derail – which solution is better? RxJS Signals Modules Standalone Templ. Driven Reactive Forms Default OnPush Nx Sheriff
72. RxJS Subscription Best Practices
73. Manage your RxJS subscriptions • Problem: Components create subscriptions without closing them • Identify: .subscribe() without .unsubscribe() or other methods • Solution: Unsubscribe from all Observables in your App • Except Angular Router Params
74. Why do we (always!) need to unsubscribe? Avoid side effects Avoid memory leaks Also for HttpClient‘s get / post ...
75. RxJS Subscription Management • Explicitly let subscription = observable$.subscribe(…); // subscription.add(otherObservable$.subscribe(…)); // also possible since V6 subscription?.unsubscribe(); • Implicitly • observable$.pipe(takeUntil(otherObservable)).subscribe(…); • observable$.pipe(takeUntilDestroyed()).subscribe(…); • Implicitly with async Pipe in Angular {{ observable$ | async }} • Automatic by Angular • Angular Router Params (the only 1 I know where unsubscribing is not needed) last operator! also triggers a cdr.markForCheck for OnPush
76. Where do we subscribe? • 1 Field initializer • 2 Constructor • 3 If @Input(s) needed → ngOnInit hook (needs injected destroyRef) • 4 Elsewhere (needs injected destroyRef)
77. Demo Unsubscribing
78. Lab 03b Further Runtime Performance
79. Recap • Use track in @for if possible • Avoid large component trees • Use Spinners and preview thumbs • Optimistic updates • Bonus: RxJS Subscription Management
80. Questions?
81. References • Angular CDK Scrolling Comp • https://material.angular.io/cdk/scrolling/overview