Software systems to innovate and grow

Using Local Change Detection to Optimize Performance in Angular

By Engineering Team April 2, 2019 10 mins read

Angular is a great framework for developing big applications, but every now and then you run into situations that require you to look for other solutions. One of these solutions is performance optimization. Performance optimization is an important aspect in the development of your Angular application. It acts as a direct way to increase your application performance by reducing constant re-rendering of your views.

To begin, let’s take a deeper look at the Angular change detection mechanism. Since Angular is an MVP framework, you are working with a view and a model. The view displays the data that is defined inside the model. To keep both in sync we use what is called the change detection process. What happens is when a change is made to the data stored in the model, the HTML view will reflect that change. Because there are events, API requests, timers, etc., these changes occur asynchronously. The change detection process is in charge of updating or rendering the DOM to reflect the new state of the data model. This process is run by cycles, meaning angular detects when to trigger the change detection cycle with the usage of NgZone/Zone.js.

Angular Change Detection Schema

An angular application is composed of a tree hierarchy structure, interconnecting child and parent components. A component has a view and a model. Every component has its own change detection, allowing each one to deal with changes in a different way.

Using Local Change Detection to Optimize Performance in Angular

The change detection process is run from the top of the tree to the leaves. What this means is that the first application root view is checked and then the process continues by checking its siblings to make use of the depth-first algorithm. Though the change detection process is really fast, must ensure that it has a cost. Achieving good performance in your app directly relates to how many times and at what frequency the change detection process is executed.

Change Detection Strategies

The ChangeDetectionStrategy represents the strategy that the Angular change detector uses to detect changes. Angular has two change detection strategies. Let’s get to know each a bit more.

ChangeDetectionStrategy.Default

The Default strategy makes everything work properly, without you having to worry about the change detection mechanism. Since Angular compares all variables that are referenced by the template in every component of the application, this strategy relies on CPU usage.

ChangeDetectionStrategy.OnPush

The OnPush strategy allows you to skip checks for a component as well as all of its nested children (so long as its input bindings haven’t been changed). As a result, you will get better performance than the default strategy because you are eliminating the need to check every change the object is triggered to resolve. Angular is working faster because it is rechecking a smaller subgroup of the component tree, rather than the whole thing. Tip: Use OnPush strategy if your objects are immutable, meaning you are not changing the state of the objects in your component.

ChangeDetectorRef

The ChangeDetectorRef is a base class for both the Default OnPush Angular views, providing change detection functionality. As described before, Angular has a change detection tree that has views to check for changes. Using the provided methods for this class, you can add or remove views from the tree, trigger change detection, and tell Angular what views need to be re-rendered.

This class has 5 methods.

Modify The Local Change Detection Mechanism

Let’s say you are building a component that requires you to continually change the displayed data. Each time the data is changed, your view will be re-rendered. Imagine a scenario where this is happening many times per second, your app will be constantly trying to render the new value. You already know that DOM operations are really expensive, so updating the user interface every time new data arrives can almost kill your app performance. In this scenario, the UI may even become unresponsive, which will end up leading to very poor user experience.

A more efficient solution is to check and render the component within a fixed amount of time. This can be done by detaching the component’s change detector and running a local check; for example, if you arrange a render every x seconds.

In the following example, you are looking at a tweetList component arranged to pull every 3 seconds. This is done by calling a tweetService to get new tweets. In order to arrange a manual change detection, you have to inject the ChangeDetectorRef into the component and use the instance to call the detach method. As its name implies, this detaches the component’s change detector from the tree structure.

Learn to Help Boost Your Application

Angular framework change detection mechanisms are very useful to add to your skillset. Hopefully, you now see how change detection can be triggered locally by a component, proving to be a powerful concept you should learn if you want to boost up your application performance. This skill is recommended for more advanced developers who want to learn about Angular in depth. By modifying your components change detection mechanism you will optimize the performance and have complete control over what will be changed and how. In addition, it might also improve your components code readability.