Tips to Improve AngularJS Performance

There’s no doubt that AngularJS makes your applications much faster and user-friendly. Killing off round trips to the server makes a much more friendly application for users, but AngularJS has some snafus that can actually make it slower than backend code. If you’re wondering why you have a few slow pages, here are some tips to speed up your code.

Reduce the Number of Watchers

The only way to keep track of changes on the client is to set watchers. Watchers do exactly as the name suggests – they watch for changes as the user clicks buttons, changes data, and chooses options from dropdowns. Each watcher can have other watchers, and as you keep increasing them, they increases the time it takes to process.

You can add code to your own to count watchers. Get an idea of the number of watchers in your code and take strides to reduce them. AngularJS 1.3 helps you reduce your watcher count, but if you are stuck with a previous version, then you must keep watchers to a minimum.

Avoid ng-repeat Whenever Possible

It’s not uncommon to have a collection that reiterates the same data across a page in HTML elements such as tables. While ng-repeat is the obvious answer, it has known performance issues. You can reduce application run times by up to 100ms by eliminating ng-repeat.

If you need a repeatable list of objects, use pagination or infinite scroll instead. It reduces the number of records rendered in the browser all at once, which will free up your client’s memory resources and speed up the application.

Limit the Number of Times You Access the DOM

Accessing the DOM is expensive, especially if it’s long and has several elements. This mistake is often done by new AngularJS coders that switch to plain JavaScript for functionality that can be done in Angular. Accessing the DOM eats up memory, and it’s an expensive feature when speed is an issue.

Don’t Forget to Cache Data

Caching data on the user’s browser always speeds up your applications. When speed is an issue, it’s beneficial to cache when you can. Of course, your cache must expire frequently when content becomes obsolete regularly, but there is usually always a way to cache at least some elements.

If you run WordPress, you can consider using its Object Cache API or Transient Cache API. These two APIs can greatly improve the performance of your WordPress site for backend processing.

Check out the $cacheFactory directive to see how you can cache data in AngularJS that can be used later in processing.

Use Browser Tools to Identify Issues

Plenty of debugging and logging go into AngularJS applications. You need to use browser tools that keep track of processing and log performance. Chrome DevTools is a group of Chrome extensions useful for AngularJS developers.

Some of these tools already come with Chrome such as the Elements Panel and the Console Panel. You can download others that will enhance your review of application performance. Don’t forget to take a look at the Security Panel. While AngularJS is generally safe, it can also be used nefariously by attackers.

Get the latest in Web Performance
Subscribe now to receive the latest news, tips and tricks in web performance!
The information you provide will be used in accordance with the terms of our privacy policy

1 Comment

  • ReplyHanna Frenk |

    Except for these tips, you can also try these ones: Use console.time for Debugging Issues, ng-if Is Better Than ng-show and Chrome Dev Tool Profiler to Identify Performance Bottlenecks. Overall you have also shared the very beneficial article.

Post a comment