jQuery Templates performance VS html injection (v5)

Revision 5 of this benchmark created on

Description

Testing 1000 rows x 10 columns.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>

<script type="x-jquery-tmpl" id="bigRowTemplate">
<tr>
        <td>${id}</td>
        <td>${foo}</td>
        <td>${fifty}</td>
        <td>${two50five}</td>
        <td>${website}</td>
        <td>${bar}</td>
        <td>${baz}</td>
        <td>${thirty}</td>
        <td>${firstName}</td>
        <td>${lastName}</td>
</tr>
</script>

<table id="target1"></table>
<table id="target2"></table>

<script>
  var data = [],
      i = 0;
  for (; i < 1000; i++) {
    data.push({
      id: i,
      foo: 'foo',
      fifty: 50,
      two50five: 255,
      website: 'http://abc.xyz.com',
      bar: 'bar',
      baz: 'baz',
      thirty: 30,
      firstName: 'john',
      lastName: 'doe'
    });
  }
  
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery Templates
$.template('row-template', $('#bigRowTemplate'));
$.tmpl('row-template', data).appendTo('#target');
ready
html injection
var i = 0, row, rows = [];
for (; row = rows[i++]; ){
        rows.push('<tr>',
                '<td>',row.id,'</td>',
                '<td>',row.foo,'</td>',
                '<td>',row.fifty,'</td>',
                '<td>',row.two50five,'</td>',
                '<td>',row.website,'</td>',
                '<td>',row.bar,'</td>',
                '<td>',row.baz,'</td>',
                '<td>',row.thirty,'</td>',
                '<td>',row.firstName,'</td>',
                '<td>',row.lastName,'</td>',
        '</tr>');
}
$('#target2').append(rows.join(''));
 
ready

Revisions

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