Angular Performance and Optimization Checklist

Angular is one of the powerful and high performing front-end framework. Applications will start becoming slow as it grows if you are not aware of how to optimize the application, it will start affecting end-user experience.

To know in advance and fix the performance, it is better to know the optimization techniques. There are many ways we can optimize your Angular application, Here I would like to discuss some of the techniques which were really helpful in my development.

Let’s discuss the techniques to avoid unnecessary change detections in Angular Application.

1. ChangeDetection Strategies: OnPush

With this Angular brought change detection strategies: Default and OnPush.

Default Strategy: By default, Angular uses the ChangeDetectionStrategy.Default change detection strategy.

In the default strategy, every time something changes in our application due to any events the change detection will trigger for all the components

For example:

• In this example, we are changing the name value and if we notice in the console log components are getting triggered for all times even we don’t have any relation with the child component.
• This technique of angular is called dirty checking. In order to update the view, each time the parent component changes the value, angular compare the old value with the newer value each time something happens in the parent component.
• When we are working with a complex application, with hundreds of inputs, If we follow the default strategy we might face performance issues in the longer run.

#angular #javascript #angularjs