Does AngularJs have performance issues?

Thank you for your attention.

Questions?

AngularJs does not have performance issues!

But you can make it slow!

Where could be the problem?

WATCHERS!

Filters

WATCHERS!

Two-way Data Binding

Double

WATCHERS!

ngRepeat

too many 

WATCHERS!

$digest()

you already know  the answer,

right?

Watchers?

$scope.$watch('item.categories', 
  function(categories){
    //...
    //...
    //...
});

 // from AngularJS 1.1.4
$scope.$watchCollection('names', callback);
// from AngularJS 1.3
$scope.$watchGroup(['foo', 'bar'], callback);  

Angular Conceps

Scope inside

Digest cycle

For each watcher digest method does:

• get observed expression value
• compare observed expression value with stored one
• execute callback
• update old value property

What leads to a digest cycle

• ng-click
• ng-change
• ng-model
• $http events (so all ajax calls)
• $timeout
• $scope.apply/$scope.digest

What to do?

to have less watcher in your application

• ng-if vs ng-show
• angular-vs-repear
• ng-change vs $watch model

What to use

<input ng-change="doSomething()" ng-model="name">

<input ng-model="name">

$scope.doSomething = function(){

};

$scope.$watch('name', $scope.doSomething);

Text

ngModelOptions

from Angular1.3

<input ng-model="search"></div>
     
<input ng-model="search" 
       ng-model-options="{ debounce: 500 }">

<input ng-model="search" 
       ng-model-options="{ updateOn: 'blur'}">

Example

One-time binding syntax {{ ::value }}

for Angular 1.3

One-time binding

<div ng-controller="EventController">
  <button ng-click="clickMe($event)">Click Me</button>
  <p>One time binding: {{::name}}</p>
  <p>Normal binding: {{name}}</p>
</div>

https://docs.angularjs.org/guide/expression#one-time-binding

• prevent recursive calls
• group the watchers (use $watchCollection)
• unwatch - example
• watch (function()) vs watch (object, true)  -  example

How to use $watch

scope.$apply() vs scope.$digest()

$apply: function(expr) {
        try {
          beginPhase('$apply');
          return this.$eval(expr);
        } catch (e) {
          $exceptionHandler(e);
        } finally {
          clearPhase();
          try {
            $rootScope.$digest();
          } catch (e) {
            $exceptionHandler(e);
            throw e;
          }
        }
      },

$apply: function(expr) {
  this.$eval(expr);
  $rootScope.$digest();        
},

https://github.com/angular/angular.js/blob/master/src/ng/rootScope.js#L1040

Run Angular digest cycle in a web worker

Seriously?

And what about Angular2.0?