How to boost your Angular application performance?

Angular is an open-source JavaScript framework developed and maintained by Google. Based on the Model-View-Controller, or MVC, programming structure, AngularJS is especially useful for creating single page web apps. The tool provides everything you need to create and manage dynamic frontends for web applications. Its modular approach to web design and massive support community make AngularJS a popular tool among professional developers. With a JavaScript library based on standard JS and HTML, AngularJS automatically takes care of things like DOM manipulation and AJAX glue that would otherwise have to be coded by developers.

In fact, AngularJS powers some of the web’s most high traffic websites including Google and Virgin America. This guide will serve as an introduction to AngularJS and offer tips on how to improve AngularJS performance.

AngularJS was created to simplify the complex process of building and managing JavaScript applications. When you were about to finish the development of our applications, you may notice a pattern in all your data-fetching user flows. In spite of the fact that the apps are all data-driven and looked really dynamic, what really was changing in the same user session wasn’t that much.

Though AngularJS is a huge framework and already has many performance enhancements built in, but it’s very easy to write code in AngularJS that will also slow down your applications.

In most of the cases, the incorrect use of AngularJS methods restricts your application's stance in the market, so AngularJS performance optimization becomes an important need of every AngularJS development expert. That’s why we're listing a few ways that will help to boost your AngularJS app performance.

So, let's get started -

A quick win

By default, AngularJS attaches information about binding and scopes to DOM nodes and adds CSS classes to data-bound elements. The application doesn’t need this information but it is added for debugging tools like Batarang to work properly. You can disable this by one simple rule in your application config. If you want to temporarily enable the debug information just open the debug console and call the method directly in the console.

Minimize or Avoid Watchers

Usually, if your Angular app is slow, it means that you either have too many watchers, or those watchers are working harder than they should. If one of the watchers is relied upon by another watcher, Angular would have to re-run the digest cycle again, to make sure that all of the changes have propagated. It will continue to do so until all of the watchers have been updated and the app has stabilized.

Disable debug data

Tools like Batarang and Protractor rely on the data about binding and scopes that AngularJS attaches to DOM elements. Therefore, when you’re done debugging, disable the extra data so that it doesn’t drag your application down.

Debounce ng-model

You can debounce the input with ng-model. For example, to debounce the search input like GOOGLE, you have to use ng-model-options=”{debounce:250}”. This makes digest cycle to get triggered no more than once per 250ms due to the changes in this input model.

Use scope.$evalAsync

If you try to manually activate the digest cycle while it’s already running, you could get an error. To prevent this from happening, use scope.$evalAsync instead of $apply when you need to initiate the digest cycle. It queues up operations to be executed at the end of the current cycle without setting off a new one.

Using OnPush

By default, Angular runs change detection on all components every time something changes in your app - from a click event to data received from an ajax call.

Use Chrome DevTools

Both the DevTools Profiler and the Timeline tool can help you find performance bottlenecks to guide your optimization efforts.

Use of native JavaScript or Lodash

Lodash boosts your application performance by simply re-writing some of the basic logic instead of relying on inbuilt AngularJS methods. If Lodash is not included in your application then you would probably need to re-write everything in native JavaScript.

Use $watchCollection instead of $watch

$watch with only 2 parameters, is fast. However, Angular supports a 3rd parameter to this function, that can look like this: $watch('value', function(){}, true). The third parameter, tells Angular to perform deep checking, meaning to check every property of the object, which could be very expensive. To address this performance issue, angular added $watchCollection('value', function(){}). $watchColleciton acts almost like $watch with a 3rd parameter, except it only checks the first layer of object’s properties, thus greatly improving the performance.

Use one-time binding

If you’re using an older version of AngularJS, you may be able to take advantage of one-time binding. To do so, just add a double-colon before the value. If applied correctly, the value will resolve once and then disappear from the watcher's list.

Disable CSS class

When creating a directive, you can designate it to be used as an element, attribute, CSS class or comments. If you don’t need CSS class and comment directives, disable them for a performance boost.

Use ng-if or ng-switch instead of ng-show

The directive ng-show simply toggles the CSS display on or off for a specified element. To remove an element from the DOM, you must use ng-if or ng-switch.

Use $cacheFactory

If you need to store data that you might need to recalculate later, use the $cacheFactory directive. It works like any other memoization method.

Avoid ng-repeat

This is the biggest win for any app if it is not using the ng-repeat directive, so it is advisable to avoid ng-repeat and build the HTML using JavaScript. For vocalizing applications, the use of ng-if results in the addition of unnecessary watchers. The use of the ng-bind-html directive is a better solution to get rid of this problem. Overuse of the ng-repeat directive can drastically drive down performance. Fortunately, there are alternatives. For instance, rather than employing ng-repeat to render a global navigation, you could make your own by using the $interpolate provider to render your template against an object before converting it into a DOM node.

Use console.time

If you’re having problems debugging, console.time (Chrome DevTools) is an excellent tool for measuring execution times and other performance benchmarks.

Tight Scoping

Keep your variables scoped tightly so that the JavaScript garbage collector can free up some memory every now and then.

Unnecessary use of third-party packages

If you include a third-party package just to achieve a small functionality which could be easily done natively with JavaScript or Angular then you are adding unnecessary size overhead to your app which could have been easily saved.

Build-optimizer flag

If you are using angular-cli make sure you specify “build-optimizer” flag for your production build. This will disable the vendor chunk and will result in more smaller code.

Updating Angular and angular-cli

Updating your Angular and angular-cli regularly gives you the benefit of many performance optimizations, bug fixes, new features, security etc.

 

Hope these are all the tips will help you to write a high-performance Angular app. Hopefully, this will help you to fine-tune your Angular app. You can share your experiences with us in the comments section. Thank you!