Download as PDF, PPTX
![How does it works? - View Engine function View_RootCmp_0(_l) { return ng.ɵvid(0, [ (_l()(), ng.ɵeld(0, 0, null, null, 4, "div", [], null, null, null, null, null)), (_l()(), ng.ɵeld(1, 0, null, null, 1, "span", [], null, null, null, null, null)), (_l()(), ng.ɵted(2, null, ["", ""])), (_l()(), ng.ɵand(16777216, null, null, 1, null, View_RootCmp_1)), ng.ɵdid(4, 16384, null, 0, ng.NgIf, [ng.ViewContainerRef, ng.TemplateRef], { ngIf: [0, "ngIf"] }, null) ], ...); }](https://image.slidesharecdn.com/runtimeperformance-2019-190512181341/75/Angular-Improve-Runtime-performance-2019-32-2048.jpg)
![How does it works? - Ivy function RootCmp_Template(rf, ctx) { if (rf & 1) { ng.ɵelementStart(0, "div"); ng.ɵelementStart(1, "span"); ng.ɵtext(2); ng.ɵelementEnd(); ng.ɵtemplate(3, RootCmp_child_cmp_Template_3, 1, 0, null, [1, "ngIf"]); ng.ɵelementEnd(); } if (rf & 2) { ng.ɵtextBinding(2, ng.ɵinterpolation1("", ctx.title, "")); ng.ɵelementProperty(3, "ngIf", ng.ɵbind(ctx.show)); }](https://image.slidesharecdn.com/runtimeperformance-2019-190512181341/75/Angular-Improve-Runtime-performance-2019-33-2048.jpg)
![9. Forms updateOn <input [(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }"> firstname: new FormControl('', { validators: Validators.required, updateOn: 'submit' })](https://image.slidesharecdn.com/runtimeperformance-2019-190512181341/75/Angular-Improve-Runtime-performance-2019-60-2048.jpg)
Uploaded byEliran Eliassy
Angular - Improve Runtime performance 2019
The document discusses improving runtime performance for front-end applications, specifically using Angular. It highlights techniques such as lazy loading, service workers, and performance measurement tools to optimize loading times and memory usage. Additionally, it addresses the importance of tree shaking, immutability, and various Angular features that contribute to efficient application performance.
Angular - Improve Runtime performance 2019
- 1.
- 2. About mySelf • ExperiencedFE developer, specialised in B2C applications • FE trainer & lecturer @ 500Tech • Angular-IL & AngularUP conf CO-organiser
- 3.
- 5. Run time performanceshould 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…
- 6. "We found that53% of mobile site visits are abandoned if pages take longer than 3 second to load…”
- 8.
- 9. Benchmark.js Chrome devtools Profiler @angular/benchpress
- 10. 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() {});
- 11. Why benchpress? ● Renderingtime - 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
- 12. Measure your bundles ngbuild --prod --source-map npx source-map-explorer dist/*/main*js
- 13.
- 14. • - -prod (AOT, tree shacking) • Lazy Loading • Opportunity for improve? • Time between html load & bootstrap Page load Optimisations
- 15. What we wantto measure? Time for first meaningful paint Time to interactive
- 16. 1. Pre rendering Aka- @angular/universal
- 17. Page Load SSR Regular load 0 3060 90 120 index.html load App bootstrap First view
- 18. 2. Pre xhrrequests
- 19. Page Load -search pages Time 0 40 80 120 160 index.html load App bootstrap First view XHR request
- 20. Page Load -search pages optimised Time 0 40 80 120 160 index.html load XHR request App bootstrap First view
- 21.
- 22. Service workers ng add@angular/pwa --project *project-name*
- 23. Service workers Fast Workoffline Installable Integrated Engaging
- 24. Service workers Fast Workoffline Installable Integrated Engaging
- 25. Caching with serviceworkers • cache API - cache your app shall and assets • Intercept your Http requests - cache them?
- 26.
- 27. Why Ivy? • Designedfor mobile applications • Our JS files are the costliest resource on the page —> main goal: reduce the bundle! • Easier to debug • Faster Compilation • Easier dynamic component loading
- 28. Caching with serviceworkers app.component.html app.component.scss app.component.ts
- 29. Caching with serviceworkers app.component.html app.component.scss app.component.ts app.component.js app.component.ngfactory.js
- 30. How does itworks? • The factory became a static method inside the component def
- 31. How does itworks? <div> <span>{{ title }}</span> <child-cmp *ngIf="show"> </child-cmp> </div>
- 32. How does itworks? - View Engine function View_RootCmp_0(_l) { return ng.ɵvid(0, [ (_l()(), ng.ɵeld(0, 0, null, null, 4, "div", [], null, null, null, null, null)), (_l()(), ng.ɵeld(1, 0, null, null, 1, "span", [], null, null, null, null, null)), (_l()(), ng.ɵted(2, null, ["", ""])), (_l()(), ng.ɵand(16777216, null, null, 1, null, View_RootCmp_1)), ng.ɵdid(4, 16384, null, 0, ng.NgIf, [ng.ViewContainerRef, ng.TemplateRef], { ngIf: [0, "ngIf"] }, null) ], ...); }
- 33. How does itworks? - Ivy function RootCmp_Template(rf, ctx) { if (rf & 1) { ng.ɵelementStart(0, "div"); ng.ɵelementStart(1, "span"); ng.ɵtext(2); ng.ɵelementEnd(); ng.ɵtemplate(3, RootCmp_child_cmp_Template_3, 1, 0, null, [1, "ngIf"]); ng.ɵelementEnd(); } if (rf & 2) { ng.ɵtextBinding(2, ng.ɵinterpolation1("", ctx.title, "")); ng.ɵelementProperty(3, "ngIf", ng.ɵbind(ctx.show)); }
- 34.
- 35. Fibonacci sequence -sounds easy to compote? Recursive Iterative
- 36.
- 37. export function fibonacci(n){ let a = 1, b = 0; let temp; while (n >= 0) { temp = a; a = a + b; b = temp; n--; } return b; }
- 38. export function fibonacci(n){ if ((n === 1) || (n === 2)) { return 1; } return fibonacci(n - 2) + fibonacci(n - 1); } O(2^n)
- 39.
- 40.
- 41. We need totrigger the change detection… Copy the entire array is efficient?
- 42. And How doesit work?
- 43. And How doesit work? Event!
- 44. And How doesit work? CD CD CD CDCDCDCD
- 45. And How doesit work? onPush
- 46. 2. immutable.js npm iimmutable -—save
- 47. Why IMMUTABLE.js? • Enforceimmutability - trigger change detection • Persistent Data Structures = X100 times faster • Should I always use this library? It depends…
- 48.
- 49.
- 50.
- 51. 5. Memoization npm imemo-decorator —-save
- 52.
- 53. ngFor trackBy <li class="list-group-itemd-flex” *ngFor="let item of data; trackBy: trackByFn"> trackByFn(index, item) { return index; } https://stackblitz.com/edit/tackbyfn?file=src/app/app.component.html
- 54.
- 55. Virtual Scroll <cdk-virtual-scroll-viewport itemSize="150"style="height:500px"> <div *cdkVirtualFor="let number of numbers" class="item"> {{number}} </div> </cdk-virtual-scroll-viewport> https://stackblitz.com/edit/angular-9ff9uf
- 56.
- 57. 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); }
- 58.
- 59.
- 60. 9. Forms updateOn <input[(ngModel)]="lastname" [ngModelOptions]="{ updateOn: 'blur' }"> firstname: new FormControl('', { validators: Validators.required, updateOn: 'submit' })
- 61. 10. Control the changedetection constructor(private changeDetectorRef: ChangeDetectorRef) { } onInit() { this.changeDetectorRef.detach(); } onClick() { this.changeDetectorRef.detectChanges(); }
- 62. 11. Angular CLI- differential polyfill loading <body> <app-root></app-root> <script src="runtime-es2015.7c2c8ed53c732cae9756.js" type="module"></script> <script src="polyfills-es2015.a5b21dbc6ea3fed110bd.js" type="module"></script> <script src="runtime-es5.f8b20787b3edb94bf0b5.js" nomodule></script> <script src="polyfills-es5.096f1b0cb0bd53082e15.js" nomodule></script> <script src="main-es2015.1f1157a6c4cf96e4f864.js" type="module"></script> <script src="main-es5.7081247ed08935ed8a0c.js" nomodule></script> </body>
- 63.