jquery - 大きなリストのクリック イベントでの jQuery デリゲートのパフォーマンス - 要素を動的に追加すると遅くなりますか?

Question

次のようなアイテムの視覚的なリストがあります。

http://jsfiddle.net/viatropos/XCe3T/1/

実際のアプリでは、合計 200 個のアイテムしかロードしていません。しかし問題は、clickたった 200 個の項目がある場合でも、イベントがハンドラーを呼び出すのにほぼ 1 秒かかることです。イベント コールバックはmouseover、リスト内の項目数に関係なくすぐに実行されます。

私の質問は、ページ上に要素がいくつあっても、デリゲート メソッドは同じように高速であるべきではないということです。私がやっていることはこれだけです：

$("body").delegate("a", "click", function(event) { console.log($(event.target).get(0)); return false; }

上記の jsfiddle の例と Web インスペクタに移動し、レンダリングされた結果のリンクをクリックすると、さらに 200 個の要素が追加されます。追加する要素が増えるほど、速度が低下することに注意してください。奇妙なことに、6000 アイテムから開始すると、2000 から開始して 6000 に達するまで一度に 200 ずつ追加する場合よりも、デリゲート/クリックの実行がはるかに高速になります。

イベントdelegateに対するjQueryのメソッドのパフォーマンスを向上させるにはどうすればよいですか? clickcss がこれを遅くしている可能性はありますか (スタイルが多すぎるか、レイアウトが最適化されていない可能性があります)。

Answer 1

私の経験に基づくと、.live または .delegate を使用するよりも、再初期化 (バインドを解除してからイベント ハンドラーを再度バインド) する方が (パフォーマンス的に) 優れています。そうすれば、必要なパフォーマンスを達成できるはずです。実際には、デリゲートが遅くなるしきい値を定義し、すべてのバインディングを削除して、eventHandlers を既存の要素セットに再バインドします。