jQueryで多数のイベント委譲を使用する方が良いですか？

Question

私はjQueryのに基づいて、新しいウェブサイト上で働いていると私は思っていた最良の選択肢に関するパフォーマンスです：

オプション1：

$("body").on("click",".label-type1",function(){...}); 
$("body").on("click",".label-type2",function(){...}); 
.... 

オプション2：

$("body").on("click","label",function(){ 
    if($(this).hasClass("label-type1"){ 
     ... 
    }else if($(this).hasClass("label-type2"){ 
     ... 
    }}); 

事前にありがとうございます。これらの2つのオプションの

Answer 1

、あなたは両方のハンドラは、あなたがターゲットにしようとしているラベルでフィルタリングする同様のプロセスを経ているので、パフォーマンスの違いはかなり無視できるはずです。

イベントと一致するセレクタのためのjQueryのソースコードを参照してください：

ネイティブ matchesSelector()ため

https://github.com/jquery/jquery/blob/master/src/event.js#L395

https://github.com/jquery/jquery/blob/2d4f53416e5f74fa98e0c1d66b6f3c285a12f0ce/src/selector-native.js#L143

および関連性能試験：

オプション1を持つことになります

https://jsperf.com/matchesselector-performance

couの作成されたイベントハンドラrseは、より多くのメモリ使用量を意味します。しかし、それは必ずしもあなたが大幅に拡張するまでパフォーマンスに影響を与えることを意味しません。それは、それがハンドラ内の追加hasClass条件を経ていないため、オプション1は、小規模で少し良い実行する必要があり、言われています。しかし、オプション2を使用すると、メモリフットプリントを低く抑え心配ならばはるかに優れている、そして、あなたのコード内の別の場所にそれぞれのケースを処理するためのヘルパー関数を作成することができるので、整理しやすいかもしれません。あなたは同じアクションを持っている場合は、これらすべての `label`要素に対して同じ` class`を管理することができない理由