jQueryのバインディングイベントは非常に高価ですか、非常に安価ですか？

Question

$（）。bind（ 'event'）関数を書いたばかりで、jQueryがDOM内の各要素を実行してこのイベントをバインドする必要がある場合、この種の呼び出しが非常に高価になることが懸念されました。

おそらく、イベントが可能な程度に効率的です。私が読んだjQueryのドキュメントはこれを明確にしていません。どんな意見？

Answer 1

イベントバインディングコードを遅くすることができるのは、セレクタとバインディング数です。 2つの中で最も重要なのはバインディング数ですが、セレクタが最初のパフォーマンスに影響を与える可能性があります。

セレクタのところでは、.myclassのような純粋なクラス名セレクタは使用しないでください。 myclassのクラスが常に<div>要素に含まれることがわかっている場合、セレクタをdiv.myclassにすると、jQueryが一致する要素をより早く見つけるのに役立ちます。また、jQueryのadvantangeを取っておかないと、巨大なセレクタ文字列を与えることができません。文字列セレクタを使用すると、関数を介して行うこともできますが、これは意図的なものです.JQueryが文字列を解析してあなたは欲しい。したがって、$('#myform input:eq(2)');の代わりに$('input','#myform').eq(2);を実行することがあります。コンテキストを指定することで、jQueryをどこにでも配置する必要がなくなります。これははるかに高速です。 More on this here。

バインディングの量：比較的中規模の要素がある場合は、現代のブラウザでは最大200、最大300の潜在的要素の一致が問題ありません。これ以上の値がある場合は、代わりにEvent Delegationを調べることをお勧めします。

イベント委任とは何ですか？

$('div.test').click(function() { 
    doSomething($(this)); 
}); 

jQueryの（各マッチした要素のイベントを結合）舞台裏でこのような何かをやっている：あなたはこのようなコードを実行すると、基本的に、

$('div.test').each(function() { 
    this.addEventListener('click', function() { 
     doSomething(this); 
    }, false); 
}); 

あなたが持っている場合、これは非効率的な取得することができます大量の要素。イベントの委任では、バインディングの量を1つに減らすことができます。しかしどうですか？イベントオブジェクトにはtargetというプロパティがあり、イベントがどの要素を処理したかを知ることができます。だからあなたは次のようなことをすることができます：

$(document).click(function(e) { 
    var $target = $(e.target); 
    if($target.is('div.test')) { // the element clicked on is a DIV 
           // with a class of test 
     doSomething($target); 
    } 
}); 

ありがたいことに、実際には上記のコードをjQueryで記述する必要はありません。 live関数は、イベントをまだ存在しない要素にバインドする簡単な方法としてアドバタイズされていますが、ターゲットが指定したセレクタと一致する場合にアクションが発生した時点でイベント委任とチェックを使用して実際に行うことができます。これはもちろん、速度が重要な場合には非常に便利な副作用があります。

物語のモラル？バインドの量が気になる場合は、スクリプトで.bindを.liveに置き換え、スマートセレクタがあることを確認してください。

ただし、すべてのイベントが.liveでサポートされているわけではありません。サポートされていないものが必要な場合は、livequeryプラグインを確認することができます。プラグインはステロイドに公開されています。

Answer 2

基本的には、それ以上の効果は期待できません。 これは、選択した各要素に対してattachEventListener（）を呼び出すことだけです。

このメソッドは、解析時間だけでは、各要素のインラインイベントハンドラを設定するよりもおそらく早いでしょう。

一般に、これは非常に安価な操作であると考えています。