1

我有一个 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}}模板中取出并将每一行附加for到 JS 中的循环中，同时记录索引。第一次运行，一切都绑定得非常快，索引记录模糊。第二次和随后的运行，每一行都需要相当长的时间来绑定，我可以在绑定行时单独观察每个索引......

4

1 回答 1

2

在 jQuery 源代码中进行了大量工具并记录了几乎所有内容之后，我想我找到了罪魁祸首：jQuery.append()并且jQuery.html()速度非常慢。通过简单地获取 Handlebars.js 返回的文字 HTML 并将其放入 DOM 中.innerHTML，我能够极大地加速表格以接近即时渲染（加上.show()并.hide()触发仅一次重绘和重排）。我认为问题必须与jQuery.clone()or相关.cloneNode，正如 Chrome 分析器所建议的那样，但我不确定为什么首先要调用它。

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

于 2014-01-15T00:00:46.663 回答