Angular Performance

In this series of challenges about performance, you will learn how to optimize and enhance the performance of your Angular application.

Before starting to resolve any challenge, I invite you to download the Angular DevTools Chrome extension if you haven’t already done so.

This extension allows you to profile your application and detect performance issues, which is very useful for understanding where performance issues can occur.

How to use it

When you serve an Angular application, you can inspect a page by pressing F12, which will open the Chrome developer tools. Then navigate to the Angular tab. From there, you can select the Profiler tab as shown below.

You can now profile your application by clicking on the record button. You can play with your application and see when change detection is triggered and which components are rerendered.

Learn more

You can learn more on the documentation page.

Now that you know how to use the Angular DevTool, you can choose a challenge, profile it, and resolve it.

🟢 Default vs OnPush Learn the difference between Default and OnPush change detection strategies.

🟢 Memoization Learn the power of pure pipes.

🟢 NgFor Optimization Learn how to improve looping performance.

🟠 Optimize Change Detection Learn how to remove zone pollution.

🟠 Optimize Big List Learn how to handle large lists.

🟠 Web workers Learn how to offload slow calculations.