jQuery append array vs append in loop

Benchmark created by Dimitris Stefanidis on November 7, 2011

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="//documentcloud.github.com/backbone/backbone-min.js"></script>

Setup

$("body").append("<div class='items'></div>");
    
    var items = new Backbone.Collection();
    for(var i=0 ; i < 300 ; i++){
      items.add({title: "Item_" + i});
    }
    
    ListViewItem = Backbone.View.extend({
      render: function(){
        $(this.el).html("<div>" + this.model.get("title") +"</div>");
        return this;
      }
    });
    
    ListView = Backbone.View.extend({
    
      addOne: function(item){
        var item = new ListViewItem({model: item});
        $(this.el).append(item.render().el);
      },
    
      render: function(){
        this.collection.each(this.addOne);
    
        return this;
      }
    });
    
    FastListView = Backbone.View.extend({
      render: function(){
        var items = [];
        this.collection.each(function(item){
          items.push("<div>" + item.get("title") + "</div>");
        });
    
        return items.join();
        
      }
    })

Teardown

    $(".items").remove();
  

Test runner

listView = new ListView({collection: items});
$(".items").append(listView.render().el);
 

listView = new FastListView({collection: items});
$(".items").append(listView.render());
 

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Dimitris Stefanidis on November 7, 2011