DEV Community

Cover image for Angular Performance: Optimize Angular Change Detection
Juri Strumpflohner for Angular

Posted on • Updated on • Originally published at juristr.com

Angular Performance: Optimize Angular Change Detection

This post has originally been published on https://juristr.com/blog/2019/08/ngperf-optimize-change-detection. Go to juristr.com/blog for more content


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!.

Top comments (5)

Collapse
 
vivainio profile image
Ville M. Vainio

Actual article seems to be missing

Collapse
 
misikir profile image
Misikir Adane

This is a promo article.... 😠

Collapse
 
juristr profile image
Juri Strumpflohner

I'm sorry you feel that way.

The series of articles here were published as syndication from my blog's and link to an Egghead series as mentioned at the very beginning of the article. All videos were free the 1st 3 days and after that only with an Egghead subscription, I know.

As mentioned in the article as well, you can find the full articles on web.dev/angular. I also share tons of other free stuff on my blog's Angular collection and you're more than welcome to ask if you have any doubts, questions, whatsoever.

I'm usually doing a combination of free article and Egghead video (which is always free initially and then only via a subscription later). You gotta make some money somewhere as well Β―_(ツ)_/Β―.
For this particular series I might even open them up completely very soon.

Collapse
 
misikir profile image
Misikir Adane

I read most of your articles they are great. I know you are great writer and you have to make money at some point. Thanks for everything. you are helping a lot of developers.

Thread Thread
 
juristr profile image
Juri Strumpflohner

Guess what, I just opened up all of the performance series: juristr.com/blog/2019/08/ngperf-ro...

9 videos, 30 mins of top-quality content

Here you go