Templates VS html injection (v13)

Revision 13 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 src="https://raw.github.com/janl/mustache.js/master/mustache.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>

<script>
var mTemplate = 
'{{#items}}<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>{{/items}}';
</script>

<table id="target1" style="display:none"></table>
<table id="target2" style="display:none"></table>
<table id="target3" style="display:none"></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'));
$('#target1').html($.tmpl('row-template', data));
ready
mustache.js
var html = Mustache.to_html(mTemplate, { items: data });
$('#target2').html(html);
ready
html injection (pure js)
var i = 0, row, rows = [];
for (; row = data[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>');
$('#target3').html(rows.join(''));
ready

Revisions

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