Handlebars render body vs modify dom

Benchmark created by tkone on December 27, 2013

Preparation HTML

<table id="mytable" style="display:none">
<tbody>
</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.2.1/handlebars.min.js"></script>

Setup

var $body = $('#mytable tbody');
    var text = '{{#each cols}}<tr id="{{id}}"><td>{{col0}}</td><td>{{col1}}</td><td>{{col2}}</td><td class="progress">{{col3}}</td><td>{{col4}}</td><td>{{col5}}</td></tr>{{/each}}';
    var tmpl = Handlebars.compile(text);
    $body.empty();
    var cols = [];
    for (var i = 0; i < 100; i++) {
      cols.push({
        id: 'row-' + i,
        col0: Math.random(),
        col1: Math.random(),
        col2: Math.random(),
        col3: Math.random(),
        col4: Math.random(),
        col5: Math.random()
      });
    }
    $body[0].innerHTML = tmpl({
      cols: cols
    });

Test runner

cols[50].col3 = 0;
$body[0].innerHTML = tmpl({
  cols: cols
});

var $row = $body.find('#row-50')
$row.find('.progress').html(0);

Revisions

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

• Revision 1: published by tkone on December 27, 2013