Preparation code

<div id="container">
</div>
<script src="http://sb.taurus.uberspace.de/jslib/jquery-1.7.1.min.js">
</script>
<script src="http://sb.taurus.uberspace.de/jslib/underscore-1.3.1.min.js">
</script>
<script src="http://sb.taurus.uberspace.de/jslib/handlebars.1.0.beta.5.js">
</script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.min.js">
</script>
<script src="http://sb.taurus.uberspace.de/jslib/backbone-0.9.2.min.js">
</script>
<script>
  var sharedData = {
    header: "Header",
    header2: "Header2",
    header3: "Header3",
    header4: "Header4",
    header5: "Header5",
    list: []
  },
      container = $("#container");

  for (var i = 0; i < 10000; i++) {
    sharedData.list[sharedData.list.length] = i;
  };

  function emberJS() {
    Ember.TEMPLATES.templateEmber = Ember.Handlebars.compile("<div><h1 class='header'>{{App.instance.header}}</h1><h2 class='header2'>{{App.instance.header2}}</h2><h3 class='header3'>{{App.instance.header3}}</h3><h4 class='header4'>{{App.instance.header4}}</h4><h5 class='header5'>{{App.instance.header5}}</h5><h6 class='header6'>{{App.instance.header6}}</h6><ul class='list'>{{#each App.instance.list}}<li class='item'>{{this}}</li>{{/each}}</ul></div>");

    App = Ember.Application.create();

    App.model = Ember.Object.extend();
    App.instance = App.model.create(sharedData);
    App.view = Ember.View.create({
      templateName: "templateEmber"
    });

    $(function() {
      App.view.appendTo(container);
      App.instance.set("header6", "ember");
    });

  };

  function backboneJS() {
alert('bbone');
    templateBackbone = Handlebars.compile("<div><h1 class='header'>{{header}}</h1><h2 class='header2'>{{header2}}</h2><h3 class='header3'>{{header3}}</h3><h4 class='header4'>{{header4}}</h4><h5 class='header5'>{{header5}}</h5><h6 class='header6'>{{header6}}</h6><ul class='list'>{{#each list}}<li class='item'>{{this}}</li>{{/each}}</ul></div>");

    var model = Backbone.Model.extend(),
        instance = new model(sharedData),
        view = Backbone.View.extend({
        el: container,
        template: templateBackbone,
        initialize: function() {
          this.model.bind('change', this.render, this);
        },
        render: function() {
          this.$el.html(this.template(this.model.toJSON()));
        }
      });

    $(function() {
      var app = new view({
        model: instance
      });
      app.render();

      instance.set("header6", "backbone");
    });
  }
</script>
<script>
  Benchmark.prototype.teardown = function() {
    $("#container").empty();
  };
</script>
<script>
  Benchmark.prototype.teardown = function() {
    $("#container").empty();
  };
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

emberJS();

backboneJS();

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:

• Revision 1: published by Tobias Otte on 23rd March 2012
• Revision 2: published by Tobias Otte on 26th March 2012
• Revision 3: published by Tobias Otte on 26th March 2012
• Revision 4: published by Tobias Otte on 2nd April 2012
• Revision 5: published by Tobias Otte on 23rd April 2012
• Revision 6: published by Tobias Otte on 24th April 2012
• Revision 7: published by Tobias Otte on 25th April 2012
• Revision 8: published by Tobias Otte on 27th April 2012
• Revision 9: published on 7th June 2012
• Revision 10: published on 16th January 2013

0 comments