javascript - handling - jQueryのバインディングイベントは非常に高価ですか、または非常に安価ですか?




jquery event handling (2)

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

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

バインディングの量については、比較的中規模の要素がある場合は、現代のブラウザでは最大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プラグインをチェックアウトすることができます。

https://code.i-harness.com

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

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


基本的に、あなたはそれ以上のことはしません。 それがしているのは、選択した各要素に対してattachEventListener()を呼び出すことだけです。

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

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





events