Angular VS Knockout VS Ember

JavaScript performance comparison

Revision 104 of this test case created by Roman

Info

In tests before 104 handlebars.js has been missed (template engine for Ember.js), that's why Ember.js has been so fast.

Libraries (latest):

Preparation code

<!-- Jquery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<!-- Angular -->
<div ng-app>
  Angular:
  <span ng-controller="Ctrl" id="angList">
    <span ng-repeat="item in data">
      {{item}}
    </span>
  </span>
</div>
<script src="http://code.angularjs.org/1.1.3/angular.js"></script>
<script>
  var Ctrl = function($scope) {
      $scope.data = [];
      }

  angular.element(document).ready(function() {
    var ang_scope = $('#angList').scope();
    window.ANGDigest = function() {
      $('#angList').scope().$digest();
    };
    window.ANGclear = function() {
      ang_scope.data.splice(0, ang_scope.data.length);
    };
    window.ANGpush = function(data) {
      ang_scope.data.push(data);
    };
  });
</script>
<!-- Knockout -->
<div id="koapp">
  Knockout:
  <span data-bind="repeat: {foreach: data}">
    <span data-bind="text: $item"></span>
  </span>
</div>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://raw.github.com/mbest/knockout-repeat/master/knockout-repeat.js">
<script src="https://raw.github.com/mbest/knockout-deferred-updates/master/knockout-deferred-updates.js"></script>
</script>
<script>
  var KOData = ko.observableArray();
  var KOviewmodel = {
    data: KOData
  };

  ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
  var KOclear = function() {
      KOData.splice(0, KOData().length);
      };
  var KOpush = function(data) {
      KOData.push(data);
      };
</script>
<!-- Ember -->
<div id="emapp">
  Ember:
  <script type="text/x-handlebars">
    <span>
       {{#each EMapp.data}}
          <span>{{this}}</span>
       {{/each}}
     </span>
  </script>
</div>
<script>
  var ENV = {
    EXTEND_PROTOTYPES: false
  };
</script>
<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<script>
  EMapp = Ember.Application.create({
    rootElement: $('#emapp')
  });
  EMapp.data = Ember.A();

  EMclear = function() {
    EMapp.data.clear();
  };
  EMpush = function(data) {
    EMapp.data.pushObject(data);
  };
</script>

Preparation code output

Angular: {{item}}
Knockout:
Ember:

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 10
ANGclear();
ANGDigest();
for (var i = 0; i < 10; i++) {
  ANGpush("ngitem");
}
ANGDigest();
pending…
Knockout 10
KOclear();
for (var i = 0; i < 10; i++) {
  KOpush("koitem");
}
pending…
Ember 10
EMclear();
for (var i = 0; i < 10; i++) {
  EMpush("emitem");
}
pending…
Angular 100
ANGclear();
ANGDigest();
for (var i = 0; i < 100; i++) {
  ANGpush("ngitem");
}
ANGDigest();
pending…
Knockout 100
KOclear();
for (var i = 0; i < 100; i++) {
  KOpush("koitem");
}
pending…
Ember 100
EMclear();
for (var i = 0; i < 100; i++) {
  EMpush("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