Performance - AngularJs in a nutshell

After writing my first bigger article about the different points for gaining more performance in AngularJs I've decided to put them all in a smaller nutshell without much explanation.

If you want the deep article have a look here: https://coding-graphefruit.blogspot.de/2016/10/performance-angularjs-javascript.html


So here's the list to gain more performance:

AngularJs 

Config

1. $httpProvider.useApplyAsync(true); 
2. $compileProvider.debugInfoEnabled(false); 
3. $compileProvider.cssClassDirectivesEnabled(false); 
4. $compileProvider.commentDirectivesEnabled(false); 

Run

1. $animate.enabled(false);

Initialize

1. Enable strictDi

1 2 3

angular.bootstrap(document, ['myApp'], { strictDi: true });

Coding

Section about what you shall care about while coding:

Avoid

All points can be written "where possible".

1. $q.defer
2. $timeout, $interval
3. $http
4. animation 
5. two-way-binding
6. ng-repeat (normaly you will need it everywhere)
1. Filter | orderBy -> Do it inside your controller
2. Custom-Attribute-Directives -> Do it inside your controller
7. ng-template (<script type="text/ng-template" id="/tpl.html"></script>)
8. ng-show
9. ng-class

Use

1. requestAnimationFrame instead setTimeout if no timeout needed
2. debounce on heavy called functions (like scrolling)
3. bind-once
4. Virtual-Scroll on big ng-repeats
5. "use strict;"
6. ng-if
7. ng-style

Don't forget

1. Unregister $interval
2. Unregister watcher ($scope.$watch)
3. Unregister listener ($scope.$on)
4. Minimize watchers/listeners (bind-once)
5. Cache Templates
6. Minimize CSS/JavaScript and combine (Gulp e.g.)
7. Disable console.log's
8. Use latest libraries
9. Cache-Data
10. Dependency-Injection (for minimizing code)

Many of this performance / avoiding points you'll find in many other topics but it was hard for me to find realy one topic which is handling all in once, so I set up my own little blog for this problems.