Home > Courses > Angular Performance Optimizations

Angular Performance Optimizations

Eyal Vardi

Register Today and save your spot!

In the course, we will unpack Angular to the elements that build the framework and learn how to work with Angular what his weaknesses are and how to improve them. The course is intended to People who know Angular and work with him on a daily basis, but don't know how he works "Under the hood" and how to improve it. I promise you will find out a lot new things.

Angular Ticks Cycle

  • NgZone service
  • The tick mechanism
  • Angular lifecycle hooks
  • The Tick performance formula

Performance Type Issue

  • High Frequency Problems
    • setInterval vs. setTimeout
    • Run out side angular with NgZone
    • Update the DOM with ChangeDetectorRef service
  • High Expressions Problems
    • On push strategy
    • Pure vs. Inpure pipe
    • *ngFor directive and trackBy option
    • On dirty strategy
    • Ngrx vs. Mobx vs. Xstate vs. immerjs
  • The Tick performance optimization formula

Async & Parallel Programming

  • Async programming problems and solutions
    • Callbacks
    • Micro tasks in ECMAScript 2016
    • Promises
    • Async & await
    • Rxjs library
  • Parallel programming problems and solutions
    • Multithreading with Workers
    • Operative.js library
    • Parallel.js library
    • Rxjs schedulers
  • Angular CLI – Adding Web Worker
  • Angular async pipe

Dynamic vs. Publish Content in Angular

    Today the standard development stores the information in the DB. For example, the list of books in the store will be saved in the book table. But sometimes books of different kinds need different fields. In addition, we want to build a form to update the details of the book according to the fields that each book has, creating dynamic screens according to fields and characteristics that are not known in advance is a challenging problem. There are two approaches to solving such problems, either at runtime or during build time.

  • How to design dynamic content?
  • How to connect the logic to the content?
  • How to debug a dynamic code?
  • When to choose to publish content?

Build Optimizations

  • Lazy loading & Pre Loading
  • Remove template whitespace
  • Angular Tree Shaking
  • Provided in option
  • The Ahead-of-Time (AOT) compiler
  • Angular Ivy

Network Optimizations

  • SSR - Server side rendering
  • PWA - Service worker communication
  • Guess.js library
  • Angular quicklink preloading strategy

Chrome Dev Tools

  • Angular dev tools
    • Augruy Extension
    • Angular Trace Extension
    • Angular Profile
  • Chrome Performance tab
  • Chrome Memory tab
  • Chrome Audits tab

Browser Paint Optimization

  • The pixel pipeline
  • Reduce the Scope and Complexity of Style Calculations
  • CSS Grid