Juri Strumpflohner
Juri Strumpflohner Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

Angular Performance: Optimize Angular Change Detection

Angular is fast, but with your help it can be even faster!

2 min read

This article is part of my “Angular Performance Week” series, where I publish a new video each day based on the performance articles on web.dev/angular. Angular is fast, but we can make it even faster. One way is by tuning its change detection system. Let’s see how.

Note: this article and attached Egghead video lesson are based on the articles on web.dev/angular by Minko Gechev and Stephen Fluin. Full credit goes to them 👍

Angular Performance Series

  1. Route Level Code Splitting
  2. Preload Lazy Routes in Angular
  3. Performance budgets with the Angular CLI
  4. Optimize Angular’s Change Detection
  5. Virtual Scrolling for large lists with the CDK
  6. Precaching with the Angular Service Worker

Don’t miss the other videos by subscribing to my newsletter.

Optimize Angular’s Change Detection

Change Detection is the magic behind Angular that automatically recognizes when changes happen. That’s either due to manual triggering or through asynchronous events. Once a change is detected, it iterates through the various Angular Components and triggers a refresh. Usually it is very fast, however - especially in larger apps - it might trigger lots of computations and thus block the main browser thread. In this lesson we’re going to learn how to optimize Angular’s change detection mechanism by reducing the amount of components it needs to update and via pure pipes.

Original web.dev article

Wanna read the original web.dev article? Check it out here!.

Questions? Thoughts? Hit me up on Twitter
comments powered by Disqus