많은 이벤트 위임을 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"){ 
     ... 
    }}); 

미리 감사드립니다.

Answer 1

두 가지 옵션 사이에서 두 핸들러가 비슷한 프로세스를 거치므로 대상 차이로 인해 필터링 할 때 성능 차이가 매우 미미해야합니다.

이벤트와 일치하는 셀렉터에 대한

참조 jQuery를 소스 코드 :

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

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

그리고 네이티브 matchesSelector()에 대한 관련 성능 테스트 :

https://jsperf.com/matchesselector-performance

옵션 1이됩니다 cou의 추가 이벤트 처리기 rse는 더 많은 메모리 사용량을 의미합니다. 하지만 그렇다고해서 규모를 획기적으로 확장해야 성능에 영향을 미칠 수 있습니다. 즉, 옵션 1은 핸들러 내부에 추가 hasClass 조건을 수행하지 않으므로 소규모로 약간 더 잘 수행되어야합니다. 그러나 옵션 2는 메모리 사용 공간을 줄이는 데 관심이 있고 코드의 별도 위치에서 각 사례를 처리하는 도우미 함수를 만들 수 있으므로 구성하기가 더 쉽습니다.