Ember vs Backbone Large Data

JavaScript performance comparison

Revision 8 of this test case created

Preparation code

<div id="container"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.9/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-pre.2/ember-1.0.0-pre.2.min.js"></script>
 <script type="text/x-handlebars">
    < span >
    {
     {#each App.collection.content}
    }
   < span > {
      {this}
    } < /span>
   {{/each} } < /span>
  </script>
<script>

    var dataList = [];
    for (var i = 0; i < 10; i++) {
        dataList[dataList.length] = i;
    };
function GlobalObj(){
   var obj = {};
obj.data = [];
for(var i=0 ;i<dataList.length;i++){
    obj.data.push(dataList[i]) ;
}
}

    function emberJS() {
        App = Ember.Application.create({
        });

        App.Model = Ember.Object.extend();

        App.collection = Ember.ArrayController.create({content: []});

        dataList.forEach(function(item) {
            App.collection.pushObject(App.Model.create({number: item}));
        });

        App.view = Ember.View.create({
           
        });

       

    };

    function backboneJS() {
        templateBackbone = Handlebars.compile("");

        var collection = new Backbone.Collection();

        dataList.forEach(function(item) {
            collection.add(new Backbone.Model({number: item}));
        });

        var View = Backbone.View.extend({
            el: '#container',
            render: function() {
                var contents = templateBackbone({list: this.collection.toJSON()});
               
            }
        });

        $(function() {
            var app = new View({collection: collection});
            app.render();
        });
    }
</script>
<script>
Benchmark.prototype.teardown = function() {
    $('content').html('');
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Ember
emberJS();
pending…
Backbone
backboneJS();
pending…
GlobalObj
 GlobalObj();
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