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
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.