huge table rendering - handlebars vs native (v3)

Revision 3 of this benchmark created by Kjartan on November 12, 2014

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>


<table class="mytable">
<thead>
<tr>
<th>head0</th>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head5</th>
</tr>
<thead>
<tbody style="display:none">
<tr>
<td>bodi0</td>
<td>bodi1</td>
<td>bodi2</td>
<td>bodi3</td>
<td>bodi4</td>
<td>bodi5</td>
</tr>
</tbody>
</table>

Setup

var num_rows = 6000;
    
    var data = [];
    for (var i = 0; i < num_rows; i++) {
      data.push({
        body0: 'bodi0',
        body1: 'bodi1',
        body2: 'bodi2',
        body3: 'bodi3',
        body4: 'bodi4',
        body5: 'bodi5'
      });
    }
    
    var html = '{{#each rows}}<tr>';
    html += '<td>{{body0}}-{{@index}}</td>';
    html += '<td>{{body1}}-{{@index}}</td>';
    html += '<td>{{body2}}-{{@index}}</td>';
    html += '<td>{{body3}}-{{@index}}</td>';
    html += '<td>{{body4}}-{{@index}}</td>';
    html += '<td>{{body5}}-{{@index}}</td>';
    html += '</tr>{{/each}}';
    var tmpl = Handlebars.compile(html);
    
    
    
    
    var $body = $('.mytable tbody');
    $body.empty();

Test runner

var $rows = $(tmpl({
  rows: data
}));

$body.empty().append($rows);

var dom_rows = [];

for (var i = 0, l = data.length; i < l; i++) {
  var d = data[i];
  var dom_tr = document.createElement('tr');
  var dom_td_body0 = document.createElement('td');
  var dom_td_body1 = document.createElement('td');
  var dom_td_body2 = document.createElement('td');
  var dom_td_body3 = document.createElement('td');
  var dom_td_body4 = document.createElement('td');
  var dom_td_body5 = document.createElement('td');
  dom_td_body0.innerHTML = 'aodi0-' + i;
  dom_td_body1.innerHTML = 'aodi1-' + i;
  dom_td_body2.innerHTML = 'aodi2-' + i;
  dom_td_body3.innerHTML = 'aodi3-' + i;
  dom_td_body4.innerHTML = 'aodi4-' + i;
  dom_td_body5.innerHTML = 'aodi5-' + i;
  dom_tr.appendChild(dom_td_body0);
  dom_tr.appendChild(dom_td_body1);
  dom_tr.appendChild(dom_td_body2);
  dom_tr.appendChild(dom_td_body3);
  dom_tr.appendChild(dom_td_body4);
  dom_tr.appendChild(dom_td_body5);
  dom_rows.push(dom_tr);
}
var $rows = $(dom_rows);
$body.empty().append($rows);

var $rows = $($.parseHTML(tmpl({
  rows: data
})));
$body.empty().append($rows);

Revisions

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

• Revision 1: published by tim.roststock on April 7, 2014
• Revision 3: published by Kjartan on November 12, 2014