9 Tips for Optimizing AngularJS

Shares

AngularJS is a great framework. If you use it correctly, it can improve your code modularity and reusability. But, with improper use, you’ll instead end up with a slow application that offers nothing but a frustrating user experience.

And if you’re stuck with the latter, don’t fret. As an AngularJS developer, here are 9 tips that will help you get on your way with optimizing your AngularJS app.

1. Minimize Watchers — Use ng-change Instead

When your AngularJS app is slow, watchers are usually the main culprit. Even though watchers are great — it’s indeed a powerful feature — it’s often a very slow one. And too many watchers can quickly deteriorate an otherwise promising application. Therefore, you need to do is to minimize watchers as much as you can. So what should you do, you ask?

Instead, focus on ng-change — when you can. $watch can cover all scenarios where you would otherwise use ng-change, but ng-change can’t cover all $watch-scenarios. Use $watch if the value isn’t bound to an input field. And use ng-change when you plan to do something in response to an input change.

2. Speed Up ng-repeat with Track By

There are a few ways to improving ng-repeat performance. Along with watchers, ng-repeat is widely known for being a sluggish bottleneck in Angular app performance. Since ng-repeat is reloaded from the server and not changed on a per-line basis, the act of re-rendering the entire list often feels sluggish.

Instead, you can use track by in certain instances. Track by can reuse DOM elements in ng-repeat, which can reduce lag significantly.

3. Use ng-if instead of ng-show when possible

ng-if and ng-show often appear strikingly similar. Especially from a user point of view. But there is a difference in how they operate. While the both receive a condition and hide the directive’s element from view, in case the condition is false, the operate differently.

ng-show hides or shows the element by adding CSS: none style. Ng-if, however, removes the element from the DOM. But it only does so when the condition is false, and it then returns the element once this toggles back to true.

And that’s where the issue lies. ng-show, by leaving elements active in the DOM, causes a lot of activity even though nothing is visible. This is because all the watch expressions are still present, even if they are hidden from the user. ng-if is a better option by actually removing the element, if it’s evaluated as false.

4. Check If You Need Two-Way Bindings

Two-way bindings are an extremely popular AngularJS feature. So popular, in fact, that many might question why I’d even dare mention removing it. In spite of this, however, two-way bindings are often unnecessary. Instead, you can bind the expressions — once — between curly brackets in your templates.

Do this by the following syntax:

{{:: myExpression }}

5. Limit DOM Filters

Angular runs all filters twice for each $digest cycle once there has been a change (once for $$watchers detecting changes, the second to look for further changes that require updated values). This will take up excessive computing power and cause lag if prolific. Therefore, try to limit your use of DOM filters as much as you can. Even though they are simple to use, they shouldn’t be sprinkled all over the app.

6. Use Lodash

First, this isn’t a black-or-white scenario. Lodash is a library that is focused on consistency and performance, and using it can increase your app’s performance. But there’s no need to use it excessively if it’s not convenient for any reason. Instead, focus on especially slow functions and try rewriting them in Lodash and check the performance again. Chances are it’s improved.

7. Use console.time for Debugging Functions

console.time is an API that can be particularly helpful for debugging Angular performance issues. However, it’s not always accurate enough to meet all needs. If that’s the case for you, you could instead get a more accurate reading with performance.now().

8. Employ Batarang to Debug Watchers

As mentioned in the beginning of this article, watchers are a big culprit when it comes to Angular app sluggishness. And to be fair, Batarang isn’t everyone’s favorite:

But Batarang can be a useful tool from the Angular team that will help you in your debugging. Check the performance tab in Batarang to see how the watch expressions perform. If you find exceptionally slow examples, you know where to put your focus. It has a lot of valuable features aside from this as well.

9. …Or Use ngInspector

ngInspector is, perhaps more than Batarang, a useful tool for debugging. While it’s not better than Batarang per se, it comes down to personal preference. ngInspector can help you find things that are repeated or unnecessary and provide you of a better understanding of the scope hierarchy.

Subscribe to the JqueryPlugins.net mailing list:
* indicates required

Reply

Pin It on Pinterest