jQuery vs Backbone internal make fn for element creation

Benchmark created by Alexey Lapusta on June 10, 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>
<script>
  JqueryView = Backbone.View.extend({
    initialize : function(){
      this.render();
    }, 
    render : function(){
      for(var i = 0; i < 100; i++) {
        $(this.el).append($('<div>', { 'class' : 'clear' }));
      }
    }
  });
  
  BackboneView = Backbone.View.extend({
    initialize : function(){
      this.render();
    }, 
    render : function(){
      for(var i = 0; i < 100; i++) {
        $(this.el).html(this.make('div', {'className' : 'clear'}));
      }
    }
  });
</script>

Test runner

new JqueryView();

new BackboneView();

Revisions

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

• Revision 1: published by Alexey Lapusta on June 10, 2011