Angular VS Knockout VS Ember VS React

JavaScript performance comparison

Revision 294 of this test case created by Simon

Info

Adding ratelimiter to KO to see if it improves performance for 100 value test.

Preparation code

<!-- Jquery -->
<script src="http://code.jquery.com/jquery-1.7.2.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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/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.data.length);
      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://knockoutjs.com/downloads/knockout-3.1.0.js"></script>

<script>
  var KOData = ko.observableArray().extend({ rateLimit: { timeout: 0, method: "notifyWhenChangesStop" } });
  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="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.4.0/ember.min.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>


<!-- React -->
<script src="http://fb.me/react-0.9.0.min.js"></script>
<div id="react">
  React: <span id="reactMountNode"></span>
  <script>
    var ReactComponent = React.createClass({displayName: 'PerfTest',
      getInitialState: function() {
        return { data: [] };
      },
      render: function() {
        var res = [];
        for(var i = 0; i < this.state.data.length; i++) {
          res.push(React.DOM.span({ key: 'test' + i }, this.state.data[i]));
        }
        return React.DOM.span(null, res);
      }
    });
    var reactComp = ReactComponent();
    React.renderComponent(reactComp, $('#reactMountNode')[0]);

    RClear = function() {
      reactComp.setState({data: []})
    };

    RPush = function(data) {
      var stateData = reactComp.state.data;
      stateData.push(data);
      reactComp.setState({data: stateData});
    }
  </script>
</div>
 

Preparation code output

Angular: {{item}}
Knockout:
Ember:
React:

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();
for (var i = 0; i < 10; i++)
  ANGpush("ngitem");
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();
for (var i = 0; i < 100; i++)
  ANGpush("ngitem");
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…
React 10
RClear();
for (var i = 0; i < 10; i++)
  RPush("ritem");
pending…
React 100
RClear();
for (var i = 0; i < 100; i++)
  RPush("ritem");
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