バックボーンテンプレートのパフォーマンスの問題

Question

バックボーンテンプレートのパフォーマンスに問題があります。

私はモデルのコレクションを持っており、各モデルには「isSelected」というフィールドがあります。

個々のモデルごとにテンプレートを使用してこのコレクションをレンダリングする必要があります。 'isSelected'フィールドは、テンプレートのチェックボックスを設定するために使用されます。

説明のため、テンプレートは次のとおりです。

チェックボックスをすべて選択する必要がある場合、コレクションの各モデルのフィールドをtrueに更新します。

私が使用したコードが

this.collection.each(function(e) { 
    e.set("isSelected", true); 
}); 

あるしかし、この方法は、コレクションは25個の項目が含まれているため、それはすべてのチェックボックス「確認」を作るために、ほぼ10秒かかりますが、非常に遅いです。

私はプレーンなjqueryを使用する場合、1秒以上かかるはずです。

この方法に問題はありますか？この種の問題のための最良のアプローチは何ですか？

Answer 1

isSelected〜trueをデフォルトでモデルに設定しないのはなぜですか？そうすれば、コレクションをループしてそれぞれを真に設定する必要はありません。

Answer 2

あなたが投稿したコードの量によって、何が処理時間を費やしているのかを知るのは難しいです。私の最初の推測は、レンダリング関数が複数回呼び出されることです。テンプレートの作成と破棄はパフォーマンスを低下させます。より多くのコードを掲載するのが難しい場合は、問題のある箇所を見つけるのは簡単でしょう。

必要になる可能性があるすべてのHTMLノードをレンダリングする必要があります。それらがレンダリングされた後、jqueryセレクタを保存し、それを使って選択したものを切り替えます。

ほとんどの場合、ボトルネックであるJSまたはバックボーンではありません。 JavaScriptはDOM、CSS、またはリフローを構成的に引き起こしており、ブラウザはあまりにも多くの作業を行っています。

私は、バックボーン用のPerfViewを構築しています。 1,000,000モデルのコレクションをレンダリングし、クロムで120FPSでスクロールできます。コードはGithubのhttps://github.com/puppybits/BackboneJS-PerfViewにあります。そこにそこには多くの最適化があり、コードにはコメントがあります。そこにあるテクニックの1つで、あなたの問題を解決することは間違いありません。