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

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

更新

因此，在尝试解决此问题时，我将{{each}}拉出模板，并在记录索引时在JS中的for循环中追加每一行。第一次运行，一切都超快速绑定，索引记录模糊。第二次和后续的运行，每一行都需要花费相当多的时间来绑定，我可以在绑定行时单独查看每个索引....

Answer 1

在jQuery源码中进行了大量工具并记录了所有内容，我认为我发现了罪魁祸首：jQuery.append()和jQuery.html()非常慢。通过简单地使用Handlebars.js返回的文字HTML并使用.innerHTML将其放入DOM中，我能够极大地加快表格到近乎即时的渲染（加上.show()和{{1仅触发一次重绘和重排）。我认为问题必须与Chrome浏览器建议的.hide()或jQuery.clone()一致，但我不确定为什么会首先调用它。

无论如何，我会把它留在这里，因为它有助于某人。