Angular VS Knockout

JavaScript performance comparison

Revision 389 of this test case created by

Preparation code

<!-- Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/knockout/3.2.0/knockout.js"></script>



<!-- Angular -->
<div ng-app>
  Angular:
  <span ng-controller="Ctrl" id="angList"><span ng-repeat="item in data">{{item}}</span></span>
</div>


<!-- Knockout -->
<div id="koapp">
  Knockout:
  <span data-bind="foreach: data"><span data-bind="text: $data"></span></span>
</div>


<script>
var Ctrl = function($scope){ $scope.data = []; };

var KOData = ko.observableArray([]);
var KOviewmodel = {data: KOData};

var ENV = {EXTEND_PROTOTYPES: false};


$(document).ready(function() {
  angular.element(document).ready(function() {
    var ang_scope = $('#angList').scope();

    window.ANGclear = function(){
      ang_scope.data = [];
      ang_scope.$apply();
    };
    window.ANGpush = function(data){
      ang_scope.data.push(data);
      ang_scope.$apply();
    };
  });

  ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
  window.KOclear = function (){
    KOData.splice(0, KOData().length);
  };
  window.KOpush = function (data){
    KOData.push(data);
  };
  
});
</script>

    

Preparation code output

<!-- Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://cdn.jsdelivr.net/knockout/3.2.0/knockout.js"></script> <!-- Angular --> <div ng-app> Angular: <span ng-controller="Ctrl" id="angList"><span ng-repeat="item in data">{{item}}</span></span> </div> <!-- Knockout --> <div id="koapp"> Knockout: <span data-bind="foreach: data"><span data-bind="text: $data"></span></span> </div> <script> var Ctrl = function($scope){ $scope.data = []; }; var KOData = ko.observableArray([]); var KOviewmodel = {data: KOData}; var ENV = {EXTEND_PROTOTYPES: false}; $(document).ready(function() { angular.element(document).ready(function() { var ang_scope = $('#angList').scope(); window.ANGclear = function(){ ang_scope.data = []; ang_scope.$apply(); }; window.ANGpush = function(data){ ang_scope.data.push(data); ang_scope.$apply(); }; }); ko.applyBindings(KOviewmodel, document.getElementById('koapp')); window.KOclear = function (){ KOData.splice(0, KOData().length); }; window.KOpush = function (data){ KOData.push(data); }; }); </script>

Test runner

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Angular 10
ANGclear();
for (var i = 0; i < 10; i++)
  ANGpush("item_" + i);

pending…
Knockout 10
KOclear();
for (var i = 0; i < 10; i++)
   KOpush("kitem_" + i);
pending…
Angular 100
ANGclear();
for (var i = 0; i < 100; i++)
  ANGpush("item_" + i);
pending…
Knockout 100
KOclear();
for (var i = 0; i < 100; i++)
   KOpush("kitem_" + i);
pending…
Angular 500
ANGclear();
for (var i = 0; i < 500; i++)
 ANGpush("item_" + i);
pending…
Knockout 500
KOclear();
for (var i = 0; i < 500; i++)
   KOpush("kitem_" + i);
pending…
Angular 1000
ANGclear();
for (var i = 0; i < 1000; i++)
  ANGpush("item_" + i);
pending…
Knockout 1000
KOclear();
var mydata = [];
for (var i = 0; i < 1000; i++)
   KOpush("kitem_" + i);

  
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.

0 Comments

Angular: {{item}}
Knockout: