Angular VS Backbone

JavaScript performance comparison

Revision 144 of this test case created by

Preparation code

<script src="https://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js">
</script>
<script src="https://rawgithub.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js">
</script>
<!-- Angular -->
<div ng-app="ANGAPP" id="angapp" ng-controller="Ctrl">
  <h3>
    Angular
  </h3>
  <span id="items" ng-repeat="item in items">
    {{item}}
  </span>
</div>
<!-- Backbone -->
<div id="backboneapp">
  <h3>
    Backbone
  </h3>
  <span class="backbone-items">
  </span>
</div>
<script>
  // Angular
  angular.module('ANGAPP', []).controller('Ctrl', function($scope) {
    $scope.items = [];
    $scope.clear = function() {
        $scope.items.splice(0);
        //$scope.$digest();
    };
    $scope.push = function(item) {
        $scope.items.push(item);
        //$scope.$digest();
    };
  });

  window.ANG = {
    clear: angular.element(document.getElementById("angapp")).scope().$apply(function () { angular.element(document.getElementById("angapp")).scope().clear()}),
    push: angular.element(document.getElementById("angapp")).scope().$apply(function () { angular.element(document.getElementById("angapp")).scope().push()})
};

  // Backbone.js
  var backboneView = Backbone.View.extend({
    template: Handlebars.compile("{{#each items}}{{x}} {{/each}}"),
    initialize: function() {
      this.collection = new Backbone.Collection();
      this.collection.on('add', this.render.bind(this));
      _.bindAll(this);
    },
    render: function() {
      this.$el.html(this.template({
        items: _.pluck(this.collection.models, 'attributes')
      }));
    },
    push: function(i) {
      this.collection.add({
        x: i
      });
    },
    clear: function() {
      this.collection.reset();
    }

  });

  window.BB = new backboneView({
    el: "#backboneapp .backbone-items"
  });

  console.log(window.BB);
</script>
    

Preparation code output

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script> <script src="https://rawgithub.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"> </script> <!-- Angular --> <div ng-app="ANGAPP" id="angapp" ng-controller="Ctrl"> <h3> Angular </h3> <span id="items" ng-repeat="item in items"> {{item}} </span> </div> <!-- Backbone --> <div id="backboneapp"> <h3> Backbone </h3> <span class="backbone-items"> </span> </div> <script> // Angular angular.module('ANGAPP', []).controller('Ctrl', function($scope) { $scope.items = []; $scope.clear = function() { $scope.items.splice(0); //$scope.$digest(); }; $scope.push = function(item) { $scope.items.push(item); //$scope.$digest(); }; }); window.ANG = { clear: angular.element(document.getElementById("angapp")).scope().$apply(function () { angular.element(document.getElementById("angapp")).scope().clear()}), push: angular.element(document.getElementById("angapp")).scope().$apply(function () { angular.element(document.getElementById("angapp")).scope().push()}) }; // Backbone.js var backboneView = Backbone.View.extend({ template: Handlebars.compile("{{#each items}}{{x}} {{/each}}"), initialize: function() { this.collection = new Backbone.Collection(); this.collection.on('add', this.render.bind(this)); _.bindAll(this); }, render: function() { this.$el.html(this.template({ items: _.pluck(this.collection.models, 'attributes') })); }, push: function(i) { this.collection.add({ x: i }); }, clear: function() { this.collection.reset(); } }); window.BB = new backboneView({ el: "#backboneapp .backbone-items" }); console.log(window.BB); </script>

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
Angular 10
ANG.clear();
for (var i = 0; i < 10; i++) {
  ANG.push(i);
}
pending…
Backbone 10
BB.clear()
for (var i = 0; i < 10; i++) {
  BB.push(i)
}
pending…
Angular 50
ANG.clear();
for (var i = 0; i < 50; i++) {
  ANG.push(i);
}
pending…
Backbone 50
BB.clear()
for (var i = 0; i < 50; i++) {
  BB.push(i)
}
pending…
Angular 100
ANG.clear();
for (var i = 0; i < 100; i++) {
  ANG.push(i);
}
pending…
Backbone 100
BB.clear()
for (var i = 0; i < 100; i++) {
  BB.push(i)
}
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}}

Backbone