6
私は、ユーザーのすべてのジョブを表示するジョブテーブルビューを持っています。 Jobsコレクションfetch（）は、何千ものレコードを含む可能性があります。私はテストを実行し、1000のジョブレコードをDBに挿入し、コレクションに対してfetch（）を実行しました。しかし1000のレコードを挿入するとブラウザがフリーズするように見えるので、1000レコードはブラウザが扱うには多すぎるようです。Backbone.js fetch（）大きなコレクションによってスクリプトがフリーズする
行のレンダリングを最適化して高速化する方法はありますか？私はあなたがいつも部分的なフェッチを行うことができる（最初の100レコードをフェッチし、さらにユーザが画面の下にスクロールするたびに100レコードをフェッチすることができる）ことを知っていますが、100レコードをスクロールして3追加の100レコードをレンダリングする前に-4秒かかると、ユーザーエクスペリエンスが低下するようです。
ここに私のコードです：
FM.Views.JobTable = Backbone.View.extend({
initialize: function(){
_.bindAll(this, 'render', 'refresh', 'appendItem');
this.collection.bind('add', this.appendItem, this);
this.collection.bind('reset', this.refresh, this);
},
render: function(){
this.el = ich.JobTable({});
$(this.el).addClass('loading');
return this;
},
refresh: function(){
$('tbody tr', this.el).remove();
$(this.el).removeClass('loading');
_(this.collection.models).each(function(item){ // in case collection is not empty
this.appendItem(item);
}, this);
return this;
},
appendItem: function(item){
var jobRow = new FM.Views.JobTableRow({
model: item
});
$('tbody', this.el).prepend(jobRow.render().el);
$(jobRow).bind('FM_JobSelected', this.triggerSelected);
}
});
FM.Views.JobTableRow = Backbone.View.extend({
tagName: 'tr',
initialize: function(){
_.bindAll(this, 'render', 'remove', 'triggerSelected');
this.model.bind('remove', this.remove);
},
render: function(){
var j = this.model.toJSON();
j.quantity = j.quantity ? number_format(j.quantity, 0) : '';
j.date_start = date('M j Y', j.date_start);
j.date_due = j.date_due ? date('M j Y', strtotime(j.date_due)) : '';
j.paid_class = j.paid;
j.status_class = j.status;
j.paid = slug2words(j.paid);
j.status = slug2words(j.status);
this.el = ich.JobTableRow(j);
$(this.el).bind('click', this.triggerSelected);
return this;
}
});
私はブログ記事でこの例を試しましたが、実際にはパフォーマンスをあまり改善していないようです。 DOMに追加するか、メモリ内の要素に追加するかにかかわらず、あなたはまだjQueryのappend（）を1000回呼びます。 – peter
yesしかし、jqueryをdom自体に追加するのではなく、もっと速くなります。それでも、もっと良い解決策があります。それはもっと汚れて見えるかもしれませんが、手動で（またはテンプレートで）HTMLを構築し、$（elem）.html（myBuildUpHtmlString）;を実行してください。あなたが1000の追加を持っていない場合はさらに高速です。 – Sander