为什么Handlebars.js第一次绑定后要花这么长时间？

Question

我有一个Handlebars.js模板，该模板接受一堆数据并将其呈现到表中。 它第一次运行时，绑定速度很快，没有任何问题。 但是，随后的任何时间都将花费很长时间（即使对于相同的数据也是如此！），有时会使浏览器崩溃。 有什么事吗

以其最通用的形式，模板如下所示：

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

JS中的绑定逻辑如下所示（再次非常通用）：

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();
});

正如我所说，这是第一次运行，绑定很快。 第二次及以后，它将在绑定步骤中保持很长时间。

UPDATE

因此，在尝试解决此问题时，我将{{each}}从模板中拉出，并在记录索引的同时在JS的for循环中附加了每一行。 第一次运行时，所有内容都将快速绑定，并且索引会模糊记录。 在第二次及以后的运行中，每行都需要花费大量的时间来绑定，随着行的绑定，我可以单独观察每个索引。

Answer 1

在使用jQuery源中的大量工具并记录了几乎所有内容之后，我想我发现了罪魁祸首： jQuery.append()和jQuery.html()太慢了。 通过简单地把由Handlebars.js返回的HTML文本，并使用DOM删除它.innerHTML ，我能表极大加速到接近即时渲染（加上.show()和.hide()只触发一次重涂和重排）。 我认为问题必须出在Chrome分析器建议的jQuery.clone()或.cloneNode ，但是我不确定为什么首先要调用它。

无论如何，我会把它留在这里，以免它对某人有所帮助。