Handlerbars vs Jquery

Benchmark created on

Description

Create Html with handlerbars versus query

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js">
</script>

Setup

var elements = ['<td><div>{{value}}</div></td>'].join('');
    var elements2 = ['<td><div>on</div></td>'].join('');
    
    var tmpl = Handlebars.compile(elements);
    
    var create = function create (){
      var td = document.createElement('td'),
          div = document.createElement('div');
    
          div.innerHTML = 'on';
          td.appendChild(div);
    
         return td;
         
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Handlerbars
for(var i = 0; i < 210; i++){
   for(var j = 0; j < 26; j++){
      tmpl({value: 'on'});
   }
}
ready
jQuery
for(var i = 0; i < 210; i++){
   for(var j = 0; j < 26; j++){
      $(elements2);
   }
}
ready
DOM
for(var i = 0; i < 210; i++){
   for(var j = 0; j < 26; j++){
      create();
   }
}
ready

Revisions

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