Angular Js vs Knockout

JavaScript performance comparison

Test case created by tim

Info

Testing performance of subscribers/watchers and updating the ui

Preparation code

<script src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script src="http://code.angularjs.org/angular-1.0.1.min.js">
</script>
<script src="
http://cdnjs.cloudflare.com/ajax/libs/knockout/2.2.0/knockout-min.js">
</script>
<script>
  var Ctrl = function($scope) {
      $scope.data = "";
      $scope.numberofChanges1 = 0;
      $scope.numberofChanges2 = 0;
      $scope.numberofChanges3 = 0;
      $scope.numberofChanges4 = 0;
      $scope.numberofChanges5 = 0;
      $scope.numberofChanges6 = 0;
      $scope.numberofChanges7 = 0;
      $scope.numberofChanges8 = 0;
      $scope.numberofChanges9 = 0;
      $scope.numberofChanges10 = 0;
      $scope.$watch('data', function(a,b,c){
          $scope.numberofChanges1++;
      });
      $scope.$watch('data', function(a,b,c){
          $scope.numberofChanges2++;
      });
      $scope.$watch('data', function(a,b,c){
          $scope.numberofChanges3++;
      });
      $scope.$watch('data', function(a,b,c){
          $scope.numberofChanges4++;
      });
      $scope.$watch('data', function(a,b,c){
          $scope.numberofChanges5++;
      });
      $scope.$watch('data', function(a,b,c){
          $scope.numberofChanges6++;
      });
      $scope.$watch('data', function(a,b,c){
          $scope.numberofChanges7++;
      });
      $scope.$watch('data', function(a,b,c){
          $scope.numberofChanges8++;
      });
      $scope.$watch('data', function(a,b,c){
          $scope.numberofChanges9++;
      });
      $scope.$watch('data', function(a,b,c){
          $scope.numberofChanges10++;
      });
  } 
      
  angular.element(document).ready(function() {
    var ang_scope = $('#angList').scope();

    ANGclear = function() {
     ang_scope.data = "OMGOMGOMG";
    };
    ANGpush = function() {
     ang_scope.data += "OMGOMGOMG";
     ang_scope.$apply();
    };
  }); </script> 
<script>
  var KOData = ko.observable("");
  var KOUpdates1 = ko.observable(0);
  var KOUpdates2 = ko.observable(0);
  var KOUpdates3 = ko.observable(0);
  var KOUpdates4 = ko.observable(0);
  var KOUpdates5 = ko.observable(0);
  var KOUpdates6 = ko.observable(0);
  var KOUpdates7 = ko.observable(0);
  var KOUpdates8 = ko.observable(0);
  var KOUpdates9 = ko.observable(0);
  var KOUpdates10 = ko.observable(0);
  KOData.subscribe(function(){
      KOUpdates1(KOUpdates1() + 1);
  });
  KOData.subscribe(function(){
      KOUpdates2(KOUpdates2() + 1);
  });
  KOData.subscribe(function(){
      KOUpdates3(KOUpdates3() + 1);
  });
  KOData.subscribe(function(){
      KOUpdates4(KOUpdates4() + 1);
  });
  KOData.subscribe(function(){
      KOUpdates5(KOUpdates5() + 1);
  });
  KOData.subscribe(function(){
      KOUpdates6(KOUpdates6() + 1);
  });
  KOData.subscribe(function(){
      KOUpdates7(KOUpdates7() + 1);
  });
  KOData.subscribe(function(){
      KOUpdates8(KOUpdates8() + 1);
  });
  KOData.subscribe(function(){
      KOUpdates9(KOUpdates9() + 1);
  });
  KOData.subscribe(function(){
      KOUpdates10(KOUpdates10() + 1);
  });
  var KOviewmodel = {data: KOData, updates1: KOUpdates1, updates2: KOUpdates2, updates3: KOUpdates3, updates4: KOUpdates4, updates5: KOUpdates5, updates6: KOUpdates6, updates7: KOUpdates7, updates8: KOUpdates8, updates9: KOUpdates9, updates10: KOUpdates10};
  
  ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
  var KOclear = function (){
    KOData("");
  };
  var KOpush = function (){
    var old = KOData()
    KOData(old += "OMGOMGOMG");
  };
</script>
<!-- Angular -->
<div style="width: 200px; height: 300px; overflow: hidden" ng-app>
  Angular:
  <span  ng-controller="Ctrl" id="angList">
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
<span> {{numberofChanges1}}</span>
<span> {{numberofChanges2}}</span>
<span> {{numberofChanges3}}</span>
<span> {{numberofChanges4}}</span>
<span> {{numberofChanges5}}</span>
<span> {{numberofChanges6}}</span>
<span> {{numberofChanges7}}</span>
<span> {{numberofChanges8}}</span>
<span> {{numberofChanges9}}</span>
<span> {{numberofChanges10}}</span>
    AngularTestArea Data: {{data}} 
  </span>
</div>
<!-- Knockout -->
<div style="width: 200px; height: 300px; overflow: hidden" id="koapp">
  Knockout: 
  <span>
    KnockoutTestArea Subscriber Updates: <span data-bind="text: data"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates1"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates2"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span>
<span data-bind="text: updates3"></span> 
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates4"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates5"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates6"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates7"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates8"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates9"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
<span data-bind="text: updates10"></span>
  </span>
</div>

Preparation code output

Angular: {{numberofChanges1}} {{numberofChanges2}} {{numberofChanges3}} {{numberofChanges4}} {{numberofChanges5}} {{numberofChanges6}} {{numberofChanges7}} {{numberofChanges8}} {{numberofChanges9}} {{numberofChanges10}} {{numberofChanges1}} {{numberofChanges2}} {{numberofChanges3}} {{numberofChanges4}} {{numberofChanges5}} {{numberofChanges6}} {{numberofChanges7}} {{numberofChanges8}} {{numberofChanges9}} {{numberofChanges10}} {{numberofChanges1}} {{numberofChanges2}} {{numberofChanges3}} {{numberofChanges4}} {{numberofChanges5}} {{numberofChanges6}} {{numberofChanges7}} {{numberofChanges8}} {{numberofChanges9}} {{numberofChanges10}} {{numberofChanges1}} {{numberofChanges2}} {{numberofChanges3}} {{numberofChanges4}} {{numberofChanges5}} {{numberofChanges6}} {{numberofChanges7}} {{numberofChanges8}} {{numberofChanges9}} {{numberofChanges10}} {{numberofChanges1}} {{numberofChanges2}} {{numberofChanges3}} {{numberofChanges4}} {{numberofChanges5}} {{numberofChanges6}} {{numberofChanges7}} {{numberofChanges8}} {{numberofChanges9}} {{numberofChanges10}} {{numberofChanges1}} {{numberofChanges2}} {{numberofChanges3}} {{numberofChanges4}} {{numberofChanges5}} {{numberofChanges6}} {{numberofChanges7}} {{numberofChanges8}} {{numberofChanges9}} {{numberofChanges10}} {{numberofChanges1}} {{numberofChanges2}} {{numberofChanges3}} {{numberofChanges4}} {{numberofChanges5}} {{numberofChanges6}} {{numberofChanges7}} {{numberofChanges8}} {{numberofChanges9}} {{numberofChanges10}} {{numberofChanges1}} {{numberofChanges2}} {{numberofChanges3}} {{numberofChanges4}} {{numberofChanges5}} {{numberofChanges6}} {{numberofChanges7}} {{numberofChanges8}} {{numberofChanges9}} {{numberofChanges10}} {{numberofChanges1}} {{numberofChanges2}} {{numberofChanges3}} {{numberofChanges4}} {{numberofChanges5}} {{numberofChanges6}} {{numberofChanges7}} {{numberofChanges8}} {{numberofChanges9}} {{numberofChanges10}} {{numberofChanges1}} {{numberofChanges2}} {{numberofChanges3}} {{numberofChanges4}} {{numberofChanges5}} {{numberofChanges6}} {{numberofChanges7}} {{numberofChanges8}} {{numberofChanges9}} {{numberofChanges10}} AngularTestArea Data: {{data}}
Knockout: KnockoutTestArea Subscriber Updates:

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in Firefox 41.0
Test Ops/sec
Angular 10
 
ANGclear();
for (var i = 0; i < 10; i++) {
  ANGpush();
}
 pending…
Knockout 10
 
KOclear();
for (var i = 0; i < 10; i++) {
  KOpush();
}
 pending…
Angular 100
 
ANGclear();
for (var i = 0; i < 100; i++) {
  ANGpush();
}
 pending…
Knockout 100
 
KOclear();
for (var i = 0; i < 100; i++) {
  KOpush();
}
 pending…
Angular 500
 
ANGclear();
for (var i = 0; i < 500; i++) {
  ANGpush();
}
 pending…
Knockout 500
 
KOclear();
for (var i = 0; i < 500; i++) {
  KOpush();
}
 pending…
Angular 1000
 
ANGclear();
for (var i = 0; i < 1000; i++) {
  ANGpush();
}
 pending…
Knockout 1000
 
KOclear();
for (var i = 0; i < 1000; i++) {
  KOpush();
}
 pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Comment form temporarily disabled.

Add a comment