Angular VS Knockout VS Ember VS Ember Multi Property Change

JavaScript performance comparison

Revision 58 of this test case created by kmdsbng

Info

Using Ember mass property change

This version uses angular 1.3, knockout 2.1.0 and ember-1.0.0-pre.2

Preparation code

<!-- Jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  window.run_number_ng = 0;
  window.run_number_ko = 0;
  window.run_number_em = 0;
</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://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js">
</script>
<script>
  var Ctrl = function($scope) {
      $scope.data = [];
      }

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

    window.ANGclear = function() {
      ang_scope.data.splice(0, ang_scope.data.length);
      ang_scope.$digest();
    };
    window.ANGpush = function(data) {
      ang_scope.data.push(data);
      ang_scope.$digest();
    };
  });
</script>
<!-- Knockout -->
<div id="koapp">
  Knockout:
  <span data-bind="foreach: data">
    <span data-bind="text: $data">
    </span>
  </span>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js">
</script>
<script>
  var KOData = ko.observableArray();
  var KOviewmodel = {
    data: KOData
  };

  ko.applyBindings(KOviewmodel, document.getElementById('koapp'));
  var KOclear = function() {
      KOviewmodel.data(ko.observableArray());
      };
  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>
  var ENV = {
    EXTEND_PROTOTYPES: false
  };
</script>
<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js">
</script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js">
</script>
<script>
  EMapp = Ember.Application.create({
    rootElement: $('#emapp')
  });
  EMapp.data = Ember.A();

  EMclear = function() {
    EMapp.set("data", Ember.A());
  };

  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 100
ANGclear();
for (var i = 0; i < 100; i++)
ANGpush("ngitem" + window.run_number_ng);

window.run_number_ng++;
pending…
Knockout 100
KOclear();
for (var i = 0; i < 100; i++)
KOpush("koitem" + window.run_number_ko);

window.run_number_ko++;
pending…
Ember 100
EMclear();

for (var i = 0; i < 100; i++) {
  EMpush(" emitem" + window.run_number_em);
}

window.run_number_em++;
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