11 Tips for improving Angular JS Performance

1. Monitor your digest cycle:

The simplest and the most feasible way to measure the performance of your Angularjs app is your digest cycle. Therefore, it is important to monitor your digest cycle and keep it short. The reason being, the shorter the digest cycle, the better and faster your application will run.

2. Keep a cap on the number of watchers:

The number of watchers you create the longer it takes in the digest cycle. As the angular world revolves around the digest cycle, it is important to focus on this. It is a best practice to reduce the number of $$watchers and $scopes will shorten the time taken in the digest cycle.

3. Consider using a one-time binding:

This is because when you use a one time binding, these expressions will stop recalculating once they are stable after the digest cycle when the result of the expression is a non-defined value. Instead of evaluating in loops in the digest cycle, the expression is evaluated only once. However, you would also have to note to which version you can apply these changes and not. For instance: the one-time binding feature introduced in Angularjs 1.3 is not available in Angular 4.0

 

4. Use scope.$evalAsync to avoid errors:

In order to avoid errors while the digest cycle is running, you could use scope.$evalAsync instead of $apply when running the digest cycle. By using this, the operations will run faster by queuing them at the end of the current cycle.

5. The use of Chrome DevTools cannot be overlooked:

From Quick File switching, editing an HTML element, searching within source code to selecting from custom colour palettes and monitor the network performance using the latest developer tools update, the benefits and the usage of Chrome Dev Tools cannot be simply overlooked.

Without which, as a user you wouldn’t be able to experience the ease of developing better, debugging faster and measuring the performance of your application more effectively.

Two best examples of such Dev Tools are CPU Profiler and CPU Timeline.

 

6. Limiting DOM access and focusing on DOM manipulation:

It’s best to limit DOM access in order to save costs. As accessing the DOM can be expensive, it’s advisable to keep the DOM trees small. It is also important to pay attention to DOM manipulation in directives. There are some offenders such as ng-show and ng-hide that can increase the $$watcher counts. If you overlook this step, the watchers from these offenders can easily be stacked up to reach hundreds and thousands inside an ng-repeat.

 

7. Avoiding ng-repeat:

Following the previous point carefully, the function of an ng-repeat is to increase the number of watchers, if not numerous watchers constantly looped over by Angular-things such as true and false.

8. You might be doing something like this:

1. <div ng-show=”something”></div>
2. $scope.something = false;
3. $scope.someMethod = function () {
4. $scope.something = true;
5. };

 

Therefore, it is time to reconsider this step.

Overuse of this feature can also bring down the performance of the system. Therefore, one step that can help you avoid this is to use $interpolate instead of ng-repeat. This helps in rendering your template against an object before it is converted to a DOM node.

9. Boost your application with Lodash:

Simple tips and techniques such as these can help you improve Angular js performance and take your system a long way. In other words, by using Lodash you can boost your application performance. Instead of relying on the inbuilt Angularjs methods, you can simply rewrite some of the basic logic. In case your application doesn’t use Lodash, then you would need to rewrite the logic in native JavaScript by yourself.

 

10. For debugging issues, use console.time:

console.time is a great API you can use if your application is struggling with any debugging issues and affecting the Angular JS performance as a whole. If you want to measure execution times and any other performance benchmarks, this could be your go-to tool to use.

11. Disabling debug data:

Similarly, you can disable extra data after debugging as its presence can slow down your application. To improve the performance of your application, you can use tools like Batarang and Protractor, which rely on the data about binding and scopes.

You can disable the debug information as follow:

 

angular.module(‘app’).config([‘$compileProvider’, configureModule]);

 

function configureModule($compileProvider) {

$compileProvider.debugInfoEnabled(false);

}

Another great function of Batarang is to help you profile and track the performance of your AngularJS application. It can help you reduce overhead by lowering your debugging efforts.

12. Filter using $filter:

To reduce the number of steps, you can use a $filter as it saves time by allowing you to preprocess data before it is sent to the View and as a result skips the DOM parsing process. In Angularjs, it runs the DOM filters twice while running the digest cycle. First, to detect changes and second to update the changed values by using a $filter, you can save time considerably.

One bonus point: Use Pagination or infinite scroll:

You can also improve the Angular JS performance by implementing pagination or infinite scroll as this helps to reduce the number of elements that loop over. You can do this by using a directive called ngInfiniteScroll.

If all the above points fail you, then this step can help you. Time and again, this list will serve as a reminder to come back to as it is more clever to employ the best practices that have been tried and tested rather than going back to the logic and making changes.

It’s important to think about limiting bindings and watchers and expensive directives like ng-repeat even before you begin coding.