Angular VS Knockout VS Ember vs CanJS

JavaScript performance comparison

Revision 116 of this test case created by Sebastian

Preparation code

<!-- Jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src="//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

{{item}}

Test runner

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

Java applet disabled.

Testing in unknown unknown
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. Here’s a list of current revisions for this page:

0 comments

Add a comment