jQuery Template table performance (v7)

Revision 7 of this benchmark created on

Description

To test performance of jQuery template for outputting 100 rows each with 10 columns where the columns have fields that can trigger events.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
</script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js">
</script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js">
</script>
<script type="text/javascript">
  $(function() {
    $('body').delegate('#table .edit a, #table .select a', 'click', function() {
      var $td = $(this).closest('td');
      $td.find('input, select').show();
      $td.find('a').hide();
    });

    $('body').delegate('#table .edit .cancel, $table .select .cancel', 'click', function() {
      var $td = $(this).closest('td');
      $td.find('input, select').hide();
      $td.find('a').show();
    });
  });
</script>
<script type="text/x-jquery-tmpl" id="tmplRow">
  < tr > < td > < input type = "checkbox"
  value = "${id}" / > < /td>
  <td>${firstName} ${lastName}</td > < td class = "edit" > < a > Edit < /a>
    <input style="display:none;" type="hidden" value="Blah" / > < input class = "cancel"
  type = "button"
  value = "cancel" / > < /td>
  <td class="select">
      <a>Select</a > < select style = "display:none;" > < option > 0 < /option>
        <option>1</option > < option > 2 < /option>
        <option>3</option > < option > 4 < /option>
        <option>5</option > < option > 6 < /option>
        <option>7</option > < option > 8 < /option>
        <option>9</option > < option > 10 < /option>
       </select > < input class = "cancel"
  type = "button"
  value = "cancel" / > < /td>
   <td>More string</td > < td > More string < /td>
   <td>More string</td > < td > More string < /td>
   <td>More string</td > < td > More string < /td>
</tr >
</script>
<table id="table">
</table>
<script>
  var data = [];
  
  for (var i = 0; i < 100; i++) {
    var row = {
      id: i,
      firstName: 'john',
      lastName: 'doe'
    };
  
    data.push(row);
  }
  
  $.template("savedTmpl", document.getElementById("tmplRow").innerHTML);
  
  var underscoreTmpl = '
  <%for(var i=0;i<rows.length;i++){%>\
  <%var row=rows[i];%>
  <tr> \
    <td> <input type = "checkbox" value = "<%row.id%>" /> </td>\
    <td><%=row.firstname%> <%=row.lastname%></td> \
    <td class = "edit"> \
      <a> Edit </a>\
      <input style="display:none;" type="hidden" value="Blah" /> \
      <input class = "cancel" type = "button" value = "cancel" /> \
    </td>\
    <td class="select">\
        <a>Select</a> \
        <select style = "display:none;"> \
          <option>0</option>\
          <option>1</option> \
          <option>2</option>\
          <option>3</option> \
          <option>4</option>\
          <option>5</option> \
          <option>6</option>\
          <option>7</option> \
          <option>8</option>\
          <option>9</option> \
          <option>10</option>\
         </select> \
         <input class = "cancel" type = "button" value = "cancel" /> \
     </td>\
     <td>More string</td> \
     <td>More string</td>\
     <td>More string</td> \
     <td>More string</td>\
     <td>More string</td> \
     <td>More string</td>\
  </tr >';
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery templates
$('#table').html($("#tmplRow").tmpl(data));
ready
string padding method
var s = [];

for (var i = 0; i < 100; i++) {
  s.push('<tr>');
  s.push('<td><input type="checkbox" value="');
  s.push(data[i].id);
  s.push('" /></td><td>');
  s.push(data[i].firstName + ' ');
  s.push(data[i].lastName);
  s.push('</td>');
  s.push('<td class="edit">        <a>Edit</a>        <input style="display:none;" type="hidden" value="Blah" />        <input class="cancel" type="button" value="cancel" />    </td>    <td class="select">        <a>Select</a>        <select style="display:none;">            <option>0</option>            <option>1</option>            <option>2</option>            <option>3</option>            <option>4</option>            <option>5</option>            <option>6</option>            <option>7</option>            <option>8</option>            <option>9</option>            <option>10</option>        </select>        <input class="cancel" type="button" value="cancel" />    </td>    <td>More string</td>    <td>More string</td>    <td>More string</td>    <td>More string</td>    <td>More string</td>    <td>More string</td>');
  s.push('</tr>');
}

$('#table').html(s.join(''));
ready
Precompiled jQuery template
$("#table").html($.tmpl("savedTmpl", data));
ready
Underscore.js
_.template(underscoreTmpl, {
  rows: data
});
ready

Revisions

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