Angular runtime performance

Angular runtime performance

This goal contains runtime performance tips and tricks, and best practices that can improve the performance of Angular application and provide a smoother user experience with 60 frames per second (fps).

Steps

Your App at the Speed of Light

In this talk, you’ll get to know common performance pitfalls in Angular applications and learn how to avoid them. We’ll have a look at different change detection strategies and ChangeDetectorRef, Zone.js, and NgZone. Let’s make your Angular app blazing fast!

AOT

AoT can be helpful not only for achieving more efficient bundling by performing tree-shaking but also for improving the runtime performance of our applications. The alternative of AoT is Just-in-Time compilation (JiT) which is performed runtime, therefore we can reduce the number of computations required for the rendering of our application by performing the compilation as part of our build process.

Resources

Web Workers

The usual problem in the typical single-page application (SPA) is that our code is usually run in a single thread. This means that if we want to achieve a smooth user experience with 60fps we have at most 16ms for execution between the individual frames are being rendered, otherwise, they'll drop by half.

In complex applications with a huge component tree, where the change detection needs to perform millions of checks each second it will not be hard to start dropping frames. Thanks to the Angular's agnosticism and being decoupled from DOM architecture, it's possible to run our entire application (including change detection) in a Web Worker and leave the main UI thread responsible only for rendering.

Resources:

Change Detection

On each asynchronous event, Angular performs change detection over the entire component tree. Although the code which detects for changes is optimized for inline-caching, this still can be a heavy computation in complex applications. A way to improve the performance of the change detection is to not perform it for subtrees which are not supposed to be changed based on the recent actions.

For more information watch the video in step 1

Resources

Optimize template expressions

Angular executes template expressions after every change detection cycle. Change detection cycles are triggered by many asynchronous activities such as promise resolutions, http results, timer events, keypresses, and mouse moves.

Expressions should finish quickly or the user experience may drag, especially on slower devices. Consider caching values when their computation is expensive.

Resources