為什么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 ，但是我不確定為什么首先要調用它。

無論如何，我會把它留在這里，以免它對某人有所幫助。