Skip to content

Development

Angular Performance Optimization - *ngFor trackBy

Yet another blog post dedicated to Angular performance optimizations. This time we will use the trackBy function of the *ngFor structural directive to optimize changes made to the DOM tree and thus optimize performances when updating a large list of items.

The use case is still a simple web application that displays a list of books. Now, a form will let the user insert a book in the list, and Delete buttons will let the user remove items from the list:

Books list create from

Angular Performance Optimization - Web Workers

In a previous blog post we identified a potential performance issue caused by calling a method from the template of an Angular component and saw that time-consuming operations could still be a problem even for an optimized application.

Prime Number Application

Using the same use case - a very simple application consisting of a number input that compute the next prime number -, we will now study how to externalise long-running operations to a web worker.

Web workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application. The advantage of this is that laborious processing can be performed in a separate thread, allowing the main (usually the UI) thread to run without being blocked/slowed down.

Angular Performance Optimization - Virtual Scroll

This is the third blog post dedicated to Angular performance optimizations. In the previous one we saw how to set the ChangeDetectionStrategy of a component to improve the performances of a simple web application that displays a list of 100000 books (a simple component that shows a title and an author).

ChangeDetectionStrategy.OnPush strategy doubled the performances of said application, but there is still room for improvement. Indeed, rendering this many elements can be slow in any web browser.

So the subject of the current blog post is how to use virtual-scrolling to improve the performances of an Angular application?