devjam2018 - angular 5 performance
Download as PPTX, PDF0 likes70 views
The document discusses optimizing Angular performance and debunking myths. It covers topics like change detection, disabling the Angular zone, taking control of change detection, reducing DOM size and recalculation, debugging with probes, server-side rendering, service workers, and reducing build time. The presentation aims to provide best practices for optimizing Angular applications and tackle common performance issues.
devjam2018 - angular 5 performance
- 1. MAY 21 / TLV, Israel Optimizing Angular
- 3. Modern software tent to get more complex Limited time & resources before release software systems do not perform well
- 4. Consultant @ MAY 21 / TLV, Israel
- 6. CD – Occurrences , Duration Components , Bindings DOM Size , Network , Timers CSS Recalculation
- 8. Angular expose Debugging probe and we can use it to collect Angular statistics Explore ApplicationRef to get Many undocumented interesting fields
- 9. Can we reduce the number of angular change detection ?
- 10. this._zone.onMicrotaskEmpty.subscribe({ next: function () { this._zone.run(function () { this.tick(); }); } }); Run Angular change detection method When all Micro Async Operations finished
- 12. Can we disable angular zone ?
- 13. Disable ngZone: • No more automatic change detection • You must invoke change detection manually when application’s state changes • Use ApplicationRef.tick()
- 14. Can we take control on angular change detection ?
- 15. Reducing Change Detection: • Use ChangeDetectionStrategy.OnPush • Breakdown your component tree • Detach Top-level components: • Update @Input values • CDR.detectChanges()
- 17. What about Forms ?
- 19. … And what about Development Performance ?
- 21. Optimize bundle
- 23. It’s 2018, Wake up people …
- 29. Questions ? MAY 21 / TLV, Israel
- 30. Thanks MAY 21 / TLV, Israel
Editor's Notes
- #25: Lets show some es7 code and use typescript to compile to ES2017 then just run in the browser Let show example