~ read.
Angularjs 1.x Performance

Angularjs 1.x Performance

For any web application performance is most important aspect, and for same reason we switch to some standard Javascript framework. There is natural expectation of every web developer is when they use any of these framework their performance is boosted. Yes, that's true at some places. For long running projects with such frameworks we still write some sluggish code for that we regret later. So here I will focus some performance tweaks particular to Angularjs 1.x to boost your web application.

Application in Production

1. Disable Debug data: Disable debug info, AngularJS attaches information about binding and scopes to DOM nodes, and adds CSS classes to data-bound elements. This information is used by Protractor/Batarang to run, which we don't need in production. More info can be found here.

2. Strict DI mode: Using strict mode in production throws error if function is not correctly annotated explicitly.This helps you to make sure Angualarjs app works even when minified. However, it also will force you to make sure that your injectable functions are explicitly annotated which will improve angular's performance. More info can be found here.

Angularjs Performance boosts

1. Minimize/avoid Watchers: Angularjs By default put watchers on all interpolate ({{}}) objects. We can strictly use bind-once to avoid such unnecessary watchers. HOW?? You can check here.

2. Avoid ng-repeat: If you want to use ng-repeat use infinite scrolling or pagination, don't forget to use track by. Nice article on performance solution with ng-repeat.

3. Use Bind once when possible: Angular 1.3 added :: notation to avoid two way binding ex- {{:: userName}}, majorly use bind once at places where you feel no need of digest cycle to fire multiple times Ex: Localization, logged in user-data etc.

4. Use $watchCollection instead of $watch: $watch with only 2 parameter is fast. If we use 3 parameter like $watch(value,function(){},true) it performs deep checking, meaning checks every property which is expensive, whereas $watchCollection like $watchCollection(value,function(){}) almost works like above except it only checks first layer which boosts performance.

5. Avoid repeated filters and cache data whenever possible:
Example, instead of: {{ INFORMATION | translate }}

In JavaScript:
$scope.info = $translate.instant(‘INFORMATION)

In HTML:
{{ ::info }}

Example, instead of: {{ loginDate | dateFilter }}

In Javascript:
var dateFilter = $filter(‘dateFilter’); loginDateFmt = timeFilter(logTime);

In HTML:
{{ ::loginDateFmt }}

6. Add debounce to ng-model-options: If there is lot of changes coming to your model, then you can use debounce like this ng-model-options = “{debounce: 250}”, which ensures to run each digest cycle once per 250ms. More about ngModelOptions can be found here.

7. ng-if instead of ng-show: Use ng-if instead of ng-show but ensure it’s more suitable for your example. ng-show -- display:none , Whereas ng-if removes HTML and recreates if needed.

8. Use native javascript or lodash:Native javascript is way better or use lodash to perform complex operations which boosts performance a lot.

9. ng-style is much faster than ng-class

10. ng-bind is much faster than expression interpolation {{}} or one time bind.

11. Use local events in your template to speed up operations - Use ngp-local-click instead of ng-click in your directive's template to speed up event processing more info here.

12. Last but not lease use below developer tools of Google Chrome to check and improve performance:

  1. cpu-profiling
  2. Network
  3. Timeline

Hope above all options will help you to boost your Angular application performance, feel free to share and comment.