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

私が言ったように、これを初めて実行すると、バインドが非常に速くなります。2回目以降は結束工程で長時間持ちこたえます。

アップデート

したがって、これを修正しようとしているときに、テンプレートから を引き出し、インデックスをログに記録しながら、JS{{each}}のループに各行を追加しました。for最初の実行では、すべてが非常に速くバインドされ、インデックスがぼやけて記録されます。2回目以降の実行では、各行のバインドにかなりの時間がかかり、行がバインドされているため、各インデックスを個別に見ることができます....

4

1 に答える 1

2

jQueryソースで多くのツールを使用し、文字通りすべてをログに記録した後、犯人を見つけたと思います：jQuery.append()そしてjQuery.html()恐ろしく遅いです。Handlebars.js によって返されたリテラル HTML を取得し、それを を使用して DOM にドロップするだけで.innerHTML、テーブルをほぼ瞬時にレンダリングするまで大幅に高速化することができました ( 1 回の再描画とリフローのみをトリガーすること.show()と組み合わせて)。Chrome プロファイラーで示唆されているように、問題はorに.hide()あったと思いますが、そもそもなぜそれが呼び出されたのかわかりません。jQuery.clone().cloneNode

とにかく、誰かを助ける可能性が低いので、これをここに残します.

于 2014-01-15T00:00:46.663 に答える