The document discusses various techniques to improve runtime performance in Angular applications, including bundling optimizations, lazy loading modules, pre-rendering, caching with service workers, immutable data structures, memoization, trackBy in ngFor, using RxJS operators, controlling change detection, and optimizing forms update. It provides code examples for measuring performance with Benchmark.js and @angular/benchpress, implementing fibonacci recursively and iteratively, using immutable.js, adding trackBy to ngFor, and detaching/reattaching change detection. The key focus is on measuring and optimizing an application's runtime performance.

1. Improve runtime
performance

2. About mySelf
• Experienced FE developer, specialised in B2C applications.
• FE Team Lead @ market.co.uk
• Weekends FE developer @ fashbash.co

3. Run time performance should bother us?
• Angular core team direction:
• Ivy - Hello world in 2.7 kb
• Better tree shaking
• Dead code elimination
• The rest is in our hands…

4. "We found that 53% of mobile site visits
are abandoned if pages take longer than
3 second to load…”

6. Tools to measure
Performance

7. Benchmark.js Chrome dev tools
Profiler
@angular/benchpress

8. function benchmark(iterations, f) {
var start = new Date();
for (var i = 0; i < iterations; i++) {
f();
}
var end = new Date();
return "Elapsed time: " + (end - start) + " msec";
}
benchmark(1000000, function() {});

9. Why benchpress?
● Rendering time - test the performance impact of stylesheet
changes
● Garbage collection - improve memory usage of applications
● Measure the client side only - ignoring BE calls
● Measure FPS
@angular/benchpress

10. Measure your bundles
ng build --prod --source-map
npx source-map-explorer dist/*/main*js

11. Page Load
Optimisations

12. • - - prod (AOT, tree shacking)
• Lazy Loading
• Opportunity for improve?
• Time between html load & bootstrap
Page load Optimisations

13. What we want to measure?
Time for first
meaningful paint
Time to
interactive

14. 1. Pre rendering
Aka - @angular/universal

15. Page Load
SSR
Regular
load
0 30 60 90 120
index.html load App bootstrap First view

16. 2. Pre xhr requests

17. Page Load - search pages
Time
0 40 80 120 160
index.html load App bootstrap First view XHR request

18. Page Load - search pages optimised
Time
0 40 80 120 160
index.html load XHR request App bootstrap First view

19. 3. Service Workers

20. Service workers
ng add @angular/pwa --project *project-name*

21. Service workers
Fast Work offline Installable
Integrated Engaging

22. Service workers
Fast Work offline Installable
Integrated Engaging

23. Caching with service workers
• cache API - cache your app shall and assets
• Intercept your Http requests - cache them?

24. Runtime
Optimisations

25. Fibonacci
remember?

26. export function fibonacci(n) {
let a = 1, b = 0;
let temp;
while (n >= 0) {
temp = a;
a = a + b;
b = temp;
n--;
}
return b;
}

27. export function fibonacci(n) {
if ((n === 1) || (n === 2)) { return 1; }
return fibonacci(n - 2) + fibonacci(n - 1);
}
O(2^n)

28. Fibonacci sequence - sounds easy to compote?
Recursive
Iterative

29. Demo…

30. 1. onPush
changeDetectionstrategy

31. We need to trigger the
change detection…
Copy the entire array
is efficient?

32. 2. immutable.js
npm i immutable -—save

33. Why IMMUTABLE.js?
• Enforce immutability - trigger change detection
• Persistent Data Structures = X100 times faster
• Should I always use this library? It depends…

34. Let’s try!
Demo…

35. 3. Re-factor
components design

36. 4. Pure function

37. 5. Memoization
npm i memo-decorator —-save

38. 6. ngFor trackBy

39. ngFor trackBy
<li class="list-group-item d-flex”
*ngFor="let item of data; trackBy: trackByFn">
trackByFn(index, item) {
return index;
}

40. 6. Use rxjs
operators

41. distinctUntilChanged, debounceTime
inputEvent: Subject<string> = new Subject<string>();
ngOnInit(): void {
this.inputEvent.pipe(
distinctUntilChanged(),
debounceTime(300)).subscribe((res: any) => {
if (res.keyCode === 13) {
this.add.emit(this.label);
this.label = '';
}
});
}
handleKey(event: any) {
this.inputEvent.next(event);
}

42. Share
this.http.get<any>('url...').pipe(share());

43. withLatestFrom

44. Buffer

45. 7. Forms updateOn
<input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }">
firstname: new FormControl('', {
validators: Validators.required,
updateOn: 'submit'
})

46. 8. Control the
change detection
constructor(private changeDetectorRef: ChangeDetectorRef) { }
onInit() {
this.changeDetectorRef.detach();
}
onClick() {
this.changeDetectorRef.detectChanges();
}

47. Thank You