Skip to content

Development

Angular Performance Optimization - Virtual Scroll

Learn how virtual scrolling boosts Angular app performance when rendering very large lists.
Classic scrolling forces the browser to render every DOM element, while virtual scrolling keeps only visible items and small buffers.
With Angular CDK’s cdk-virtual-scroll-viewport, massive datasets become lightweight to display—provided each item has a predictable height.
The guide shows how to integrate CDK Virtual Scroll, adjust components, and fix update issues linked to array references.
Switching to a BehaviorSubject offers a cleaner, reactive way to propagate list changes.
Performance metrics reveal drastic improvements in rendering and change detection times.
Use these techniques to make large, scrollable lists smooth and highly responsive in Angular applications.

Table of Contents

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.