jQuery Templates performance (v7)

Revision 7 of this benchmark created on

Description

Testing 100 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="target"></table>

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

Teardown


    $('#target').empty();

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery Templates
$('#bigRowTemplate').tmpl(data).appendTo('#target');
ready
Standard DOM innerHTML append
var item, html = '';

for (var i = 0; i < 1000; i++) {
 item = data[i];

 html += '<tr>' +
    '<td>' + item.id + '</td>' +
    '<td>' + item.foo + '</td>' +
    '<td>' + item.fifty + '</td>' +
    '<td>' + item.two50five + '</td>' +
    '<td>' + item.website + '</td>' +
    '<td>' + item.bar + '</td>' +
    '<td>' + item.baz + '</td>' +
    '<td>' + item.thirty + '</td>' +
    '<td>' + item.firstName+ '</td>' +
    '<td>' + item.lastName + '</td>' +
  '</tr>';
}

document.getElementById('target').innerHTML = html;
ready
jQuery Templates (compiled template)
var template = $('#bigRowTemplate').template();
var html     = $.tmpl(template, data);

$('#target').append(html);
ready

Revisions

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