AngularJS is an extensive framework and it includes some inbuilt performance enhancements that makes it easy for web developers to use it with minimal or no problems. However, these enhancements are not able to fix all the issues you could face when you are developing some apps. Many web developers are unaware of some of the key concepts that AngularJS can perform so well. Others do not understand these key concepts at all. This may make it possible for one to create a sluggish code even though the framework is capable of performing faster and better.
This means that there are a number of performance points that every AngularJS user should know about, which can help improve general performance by creating better codes. If speed and efficiency is your goal when creating applications, here are some important points you should consider when using AngularJS:
1. If possible, use binding once
The one time binding syntax should always be used in this case, which is {{ ::value }}. This syntax renders the data once and lets it remain the same without the data being affected by any model updates that will come in the future. The latest version of AngularJS has introduced a double colon notation to signify this syntax.
The single binding syntax is here to make things fast and most importantly easier. It is a syntax that will be easy to use by any web developer and will help in lowering the $$watcher. In the end, AngularJS will have less work to do, resulting in the applications to be more responsive.
2. Stop using repeated filters
This is important as well in order to speed up the responsiveness of your applications. Assigning the needed value to a variable or setting it up to a property on an object when you are dealing with many variables makes the results cleaner and more responsive.
You can do this:
– In JavaScript $scope.description: $translate.instant('DESCRIPTION')
– In HTML {{::description}}
Instead of:
{{'DESCRIPTION' | translate }}
Also try to cache data whenever possible.
3. Avoid Watchers as much as possible
If possible avoid them totally, but if not use them on a minimal level. Whenever your app is slowing down, it is mainly because you are using more watchers than you should or because the watchers you are using are working more than they should. When dirty checking is being used in order to track down all the changes that have been made, the cycle does not end as fast as it is supposed to when there are so many watchers in use. This is what slows down everything. The problem is that it is very easy to add many watchers in AngularJS, so be careful to avoid them as much as possible.
4. If possible, avoid ng-repeat
When it comes to AngularJS performance, ng-repeat becomes the main offender. It mainly deals with arrays of $scope Objects and this affects the performance of $digest cycle. It is therefore important to avoid it if possible, though if you must use ng-repeat, you can use pagination or infinite scrolling as they do not affect performance as much as ng-repeat.
If you choose to use infinite scrolling, remember to use track by if it is possible. Below is an example:
- ng-repeat=”Task in Tasks track by Task.Id>
5. Limit your use of DOM filters
When using filters, you will realize that they are very easy to use, which will prompt you to use them even more. There is nothing wrong in using them though, only that Angular.js will run the filters twice in every $digest cycle every time you change something. In the end, you will find that the application is getting extremely slow, contrary to your expectations. You cannot have this!
Below is an example of one of the slowest filters:
{{ filter_expression | filter : expression : comparator }}
If you are able to avoid the inline filter syntax, data will be processed faster.
Limiting the filters is easy, and it will speed up your applications.
6. Switch to $watchCollection in place of $watch (with a 3rd parameter)
$watch with only two parameters will work much faster. The problem is that it is not supported by Angular.js. The one that Angular.js supports is one with the third parameter, but the framework will be compelled to conduct a deep checking for every property of the object, which ends up slowing things.
It is with this respect that Angular.js added $watchCollection(‘value’, function(){}), which performs much like the $watch with a third parameter only that the former one works much faster because it only checks the first layer of the properties of the object.
7. Benchmark your functions with console.time
console.time is a well-known API, and a preference of many web developers. It works very well whenever you are debugging performance problems in Angular.js. This is how it looks:
console.time("TimerName");
//Some code
console.timeEnd("TimerName");
It is a trustworthy API that will not let you down if you choose to support all your functions with it for the sake of performance.
This is how it can be used:
console.time("TimerName");
setTimeout(function(){
console.timeEnd("TimerName");
}, 100);
//In console $: TimerName: 100.324ms
8. Use of Lodash or native JavaScript
Some of the Angular.js writing methods can slow down the entire process. If you encounter slow functions, you can consider using Lodash or even native JavaScript. It will be much better to rewrite everything in Lodash or native JavaScript so as to speed up things for you.
Some of these simple optimizations are easy to apply, though you must determine whether Lodash is included or not. If it is not, it will be easier to use native JavaScript to rewrite everything for the sake of better performance.
Angular.js is a framework that is designed to work faster and better for web developers. The 8 ways discussed are bound to help you improve performance should you ever experience things going slowly, which will help you enjoy using the framework even more.
