Angular VS React VS BACKBONE

JavaScript performance comparison

Revision 547 of this test case created by Prateek Khurana

Preparation code

<!-- Jquery -->
<script src="https://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>


<!-- 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>

<!-------- Backbone-------->
<div id="backboneapp">
  <h3>Backbone</h3>
  <span class="backbone-items"></span>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/thorax/2.2.1/thorax-combined.js"></script>
<script>
// Backbone.js
var backboneView = Thorax.View.extend({
  push: function(i) {
    this.$el.append(i);
  },
  clear: function() {
    this.$el.html('');
  }
});

window.BB = new backboneView({el: "#backboneapp .backbone-items"});
</script>
<!-------- End Backbone -------->

    

Preparation code output

<!-- Jquery --> <!-- 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> <!-- 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> <!-------- Backbone--------> <div id="backboneapp"> <h3>Backbone</h3> <span class="backbone-items"></span> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/thorax/2.2.1/thorax-combined.js"></script> <script> // Backbone.js var backboneView = Thorax.View.extend({ push: function(i) { this.$el.append(i); }, clear: function() { this.$el.html(''); } }); window.BB = new backboneView({el: "#backboneapp .backbone-items"}); </script> <!-------- End Backbone -------->

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
Backbone 10
BB.clear();
for (var i = 0; i < 10; i++) {
  BB.push(i);
}
pending…
Backbone 100
BB.clear();
for (var i = 0; i < 100; i++) {
  BB.push(i);
}
pending…
Backbone 1000
BB.clear();
for (var i = 0; i < 1000; i++) {
  BB.push(i);
}
pending…
Angular 10
ANGclear();
for (var i = 0; i < 10; i++)
  ANGpush("ngitem");
pending…
Angular 100
ANGclear();
for (var i = 0; i < 100; i++)
  ANGpush("ngitem");
pending…
Angular 1000
ANGclear();
for (var i = 0; i < 1000; i++)
  ANGpush("ngitem");
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…
React 1000
RClear();
for (var i = 0; i < 1000; 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.

0 Comments

Angular: {{item}}
React:

Backbone