Angular VS Knockout VS Ember vs CanJS

JavaScript performance comparison

Revision 116 of this test case created by Sebastian

Preparation code

<!-- Jquery -->
<script src="https://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js">
</script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js">
</script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.min.js">
</script>
<!-- Angular -->
<div ng-app="ANGAPP" id="angapp" ng-controller="Ctrl">
  <span ng-repeat="item in data">{{item}}</span>
</div>
<!-- Knockout -->
<div id="koapp">
  <span data-bind="foreach: data">
  	<span data-bind="text: $data"></span>
  </span>
</div>
<!-- Ember -->
<div id="emapp">
  <script type="text/x-handlebars">
    <span>{{#each EMAPP.data}}<span>{{this}}< /span>{{/each}}</span>
  </script>
</div>
      
<script>
Benchmark.prototype.setup = function() {
  // Angular
  angular.module('ANGAPP')
  	.controller('Ctrl', function($scope) {
    	$scope.data = [];
  	});
  
  angular.element(document).ready(function() {
    var ang_scope = $('#angapp').scope();
    console.log(ang_scope);
  
    window.ANG = {
      clear: function() {
        ang_scope.data.splice(0);
        ang_scope.$digest();
      },
      push: function(data) {
        ang_scope.data.push(data);
        ang_scope.$digest();
      }
    };
  });
  
  // KO
  var ko_data = ko.observableArray();
  var ko_viewmodel = {
    data: ko_data
  };
  
  ko.applyBindings(ko_viewmodel, document.getElementById('koapp'));
  
  window.KO = {
    clear: function() {
      ko_data.splice(0);
    },
    push: function(data) {
      ko_data.push(data);
    }
  }
  
  //Ember
  window.EMAPP = Ember.Application.create({
    rootElement: $('#emapp')
  });
  EMAPP.data = Ember.A();
  
  window.EM = {
    clear: function() {
      EMAPP.data.clear();
    },
    push: function(data) {
      EMAPP.data.pushObject(data);
    }
  }

};
</script>

Preparation code output

<!-- Jquery --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.3/angular.min.js"> </script> <script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"> </script> <script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.min.js"> </script> <!-- Angular --> <div ng-app="ANGAPP" id="angapp" ng-controller="Ctrl"> <span ng-repeat="item in data">{{item}}</span> </div> <!-- Knockout --> <div id="koapp"> <span data-bind="foreach: data"> <span data-bind="text: $data"></span> </span> </div> <!-- Ember --> <div id="emapp"> <script type="text/x-handlebars"> <span>{{#each EMAPP.data}}<span>{{this}}< /span>{{/each}}</span> </script> </div>

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
ANG.clear();
for (var i = 0; i < 50; i++) {
	ANG.push("ngitem");
}
pending…
Knockout
KO.clear();
for (var i = 0; i < 50; i++) {
  KO.push("koitem");
}
pending…
Ember
EM.clear();
for (var i = 0; i < 50; i++) {
  EM.push("emitem");
}
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

{{item}}