Angular Js vs Knockout (v13)

Revision 13 of this benchmark created on

Description

Testing performance of subscribers/watchers and updating the ui

Preparation HTML

<script src="http://code.jquery.com/jquery-1.7.2.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js">
</script>
<script src="
http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.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="html: updates1">
    </span>
    <span data-bind="html: updates1">
    </span>
    <span data-bind="html: updates1">
    </span>
    <span data-bind="html: updates1">
    </span>
    <span data-bind="html: updates1">
    </span>
    <span data-bind="html: updates1">
    </span>
    <span data-bind="html: updates1">
    </span>
    <span data-bind="html: updates1">
    </span>
    <span data-bind="html: updates1">
    </span>
    <span data-bind="html: updates1">
    </span>
    <span data-bind="html: updates2">
    </span>
    <span data-bind="html: updates2">
    </span>
    <span data-bind="html: updates2">
    </span>
    <span data-bind="html: updates2">
    </span>
    <span data-bind="html: updates2">
    </span>
    <span data-bind="html: updates2">
    </span>
    <span data-bind="html: updates2">
    </span>
    <span data-bind="html: updates2">
    </span>
    <span data-bind="html: updates2">
    </span>
    <span data-bind="html: updates2">
    </span>
    <span data-bind="html: updates3">
    </span>
    <span data-bind="html: updates3">
    </span>
    <span data-bind="html: updates3">
    </span>
    <span data-bind="html: updates3">
    </span>
    <span data-bind="html: updates3">
    </span>
    <span data-bind="html: updates3">
    </span>
    <span data-bind="html: updates3">
    </span>
    <span data-bind="html: updates3">
    </span>
    <span data-bind="html: updates3">
    </span>
    <span data-bind="html: updates3">
    </span>
    <span data-bind="html: updates4">
    </span>
    <span data-bind="html: updates4">
    </span>
    <span data-bind="html: updates4">
    </span>
    <span data-bind="html: updates4">
    </span>
    <span data-bind="html: updates4">
    </span>
    <span data-bind="html: updates4">
    </span>
    <span data-bind="html: updates4">
    </span>
    <span data-bind="html: updates4">
    </span>
    <span data-bind="html: updates4">
    </span>
    <span data-bind="html: updates4">
    </span>
    <span data-bind="html: updates5">
    </span>
    <span data-bind="html: updates5">
    </span>
    <span data-bind="html: updates5">
    </span>
    <span data-bind="html: updates5">
    </span>
    <span data-bind="html: updates5">
    </span>
    <span data-bind="html: updates5">
    </span>
    <span data-bind="html: updates5">
    </span>
    <span data-bind="html: updates5">
    </span>
    <span data-bind="html: updates5">
    </span>
    <span data-bind="html: updates5">
    </span>
    <span data-bind="html: updates6">
    </span>
    <span data-bind="html: updates6">
    </span>
    <span data-bind="html: updates6">
    </span>
    <span data-bind="html: updates6">
    </span>
    <span data-bind="html: updates6">
    </span>
    <span data-bind="html: updates6">
    </span>
    <span data-bind="html: updates6">
    </span>
    <span data-bind="html: updates6">
    </span>
    <span data-bind="html: updates6">
    </span>
    <span data-bind="html: updates6">
    </span>
    <span data-bind="html: updates7">
    </span>
    <span data-bind="html: updates7">
    </span>
    <span data-bind="html: updates7">
    </span>
    <span data-bind="html: updates7">
    </span>
    <span data-bind="html: updates7">
    </span>
    <span data-bind="html: updates7">
    </span>
    <span data-bind="html: updates7">
    </span>
    <span data-bind="html: updates7">
    </span>
    <span data-bind="html: updates7">
    </span>
    <span data-bind="html: updates7">
    </span>
    <span data-bind="html: updates8">
    </span>
    <span data-bind="html: updates8">
    </span>
    <span data-bind="html: updates8">
    </span>
    <span data-bind="html: updates8">
    </span>
    <span data-bind="html: updates8">
    </span>
    <span data-bind="html: updates8">
    </span>
    <span data-bind="html: updates8">
    </span>
    <span data-bind="html: updates8">
    </span>
    <span data-bind="html: updates8">
    </span>
    <span data-bind="html: updates8">
    </span>
    <span data-bind="html: updates9">
    </span>
    <span data-bind="html: updates9">
    </span>
    <span data-bind="html: updates9">
    </span>
    <span data-bind="html: updates9">
    </span>
    <span data-bind="html: updates9">
    </span>
    <span data-bind="html: updates9">
    </span>
    <span data-bind="html: updates9">
    </span>
    <span data-bind="html: updates9">
    </span>
    <span data-bind="html: updates9">
    </span>
    <span data-bind="html: updates9">
    </span>
    <span data-bind="html: updates10">
    </span>
    <span data-bind="html: updates10">
    </span>
    <span data-bind="html: updates10">
    </span>
    <span data-bind="html: updates10">
    </span>
    <span data-bind="html: updates10">
    </span>
    <span data-bind="html: updates10">
    </span>
    <span data-bind="html: updates10">
    </span>
    <span data-bind="html: updates10">
    </span>
    <span data-bind="html: updates10">
    </span>
    <span data-bind="html: updates10">
    </span>
  </span>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Angular 10
ANGclear();
for (var i = 0; i < 10; i++) {
  ANGpush();
}
ready
Knockout 10
KOclear();
for (var i = 0; i < 10; i++) {
  KOpush();
}
ready
Angular 100
ANGclear();
for (var i = 0; i < 100; i++) {
  ANGpush();
}
ready
Knockout 100
KOclear();
for (var i = 0; i < 100; i++) {
  KOpush();
}
ready
Angular 500
ANGclear();
for (var i = 0; i < 500; i++) {
  ANGpush();
}
ready
Knockout 500
KOclear();
for (var i = 0; i < 500; i++) {
  KOpush();
}
ready
Angular 1000
ANGclear();
for (var i = 0; i < 1000; i++) {
  ANGpush();
}
ready
Knockout 1000
KOclear();
for (var i = 0; i < 1000; i++) {
  KOpush();
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.