Why does Handlebars.js take so long to bind after the first time?

Question

I have a Handlebars.js template that takes a bunch of data and renders it into a table. The first time it runs, it binds rather quickly and doesn't have any problems. Any subsequent time, however, it takes a long time (even for the same data!) and sometimes crashes the browser. What could be wrong?

In its most generic form, the template looks like this:

{{#each this}}
<tr>
    <td>{{data}}</td>
    ...
    <td>{{moredata}}</td>
</tr>
{{/each}}

And the binding logic in JS looks like this (very generic, again):

var table = $('#mytable').empty();
$.ajax(url, data).done(function(response) {
    var template = Handlebars.compile(mytemplate);
    table.hide();
    table.html(template(response.data)); //takes a long time after the 1st time
    table.show();
});

As I said, the first time this runs, it's very quick to bind. The second and subsequent times, it holds up for a long time at the binding step.

UPDATE

So while trying to fix this, I pulled the {{each}} out of the template and appended each row in a for loop in the JS while logging the index. The first run, everything binds super quick and the indexes log in a blur. The second and subsequent runs, each row takes a noticeable amount of time to bind and I can watch each index individually as the rows are being bound....

Answer 1

After much tooling around in the jQuery source and logging of literally everything, I think I've found the culprit(s): jQuery.append() and jQuery.html() are horrifically slow. By simply taking the literal HTML returned by Handlebars.js and dropping it in the DOM using .innerHTML , I was able to immensely speed up the table to near-instant rendering (coupled with .show() and .hide() to trigger only one repaint and reflow). I think the issue had to be with jQuery.clone() or .cloneNode , as suggested by the Chrome profiler, but I'm not sure why that was being called in the first place.

Anyways, I'll leave this here in the off chance that it helps someone.