Speeding up your AngularJS applications

In general AngularJS applications are quite fast, specially when compared to more traditional browser based applications that constantly post back to the server. However there are always a few things that will help performance and make an application even faster.

 

Disabling Debug Data

Normally AngularJS adds several things like CSS classes and some scope related properties to DOM elements. This is not really needed to run the application and is really only done to help development tools like Protractor and Batarang. When the application is in production that is not really needed and you can save some overhead by disabling this using the $compileProvider.debugInfoEnabled() function.

   1: demoApp.config(function($compileProvider) {

   2:   $compileProvider.debugInfoEnabled(false);

   3: });

 

Explicit dependency injection annotations

Another option to speed up your application is by using explicit dependency injection annotations. If the DI annotations are not present AngularJS has to parse functions to see the parameter names, something that can be avoided by adding the explicit annotations. The annotations can be added manually, which can be tedious to do, or automatically using something like ng-annotate with either a Gulp or Grunt task.

Adding the ngStrictDi directive to the same element as the ngApp directive can help you find missing annotations.

 

Reducing the number of $apply() calls

Another helpful option is to reduce the number of $apply() calls that are the result of $http request finishing. When you are doing multiple $http requests when a page loads each will trigger a $apply() function causing all watches and data bindings to be reevaluated. By combining these into a single $apply() call for requests that are done at almost the same time we can increase the load speed of you application, something that can be done using $httpProvider.useApplyAsync().

   1: demoApp.config(function($httpProvider) {

   2:   $httpProvider.useApplyAsync(true);

   3: });

 

Enjoy!

2 thoughts on “Speeding up your AngularJS applications

  1. Hi Bill,

    You are right, I forgot to finish the sentence for some unknown reason.

    Thanks for pointing it out,
    Maurice

Leave a Reply

Your email address will not be published. Required fields are marked *