jQuery보다 JavaScript의 이벤트 위임을 사용하면 성능상의 이점이 있습니까?

Question

자바 스크립트 :

parent.addEventListener("click", function(e) { 
    if (e.target === child) { code } 
}); 

대

jQuery를 :

$(parent).on("click", child, function() {});

Answer 1

한계, jQuery의 on 방법은 조금 더 많은 작업이 실행처럼, 당신에게 추가 기능을 제공하기 위해 않습니다 이벤트로 선택기가 루트까지 버블 링되므로 이벤트가 발생합니다. 당신이 기대하는 요소로부터; 조심하지 않으면 문제가 될 수 있습니다. documentation, 이벤트 성능 :

문서 트리 맨 위에 많은 위임 이벤트 처리기를 연결하면 성능이 저하 될 수 있습니다. 이벤트가 발생할 때마다 jQuery는 해당 유형의 모든 첨부 이벤트의 모든 선택기를 이벤트 대상에서 문서의 맨 위까지의 경로에있는 모든 요소와 비교해야합니다.

Plain javascript는 더 간단합니다. 그 요소 아래에서 일어난 모든 이벤트가 발생하기 때문에 매우 구체적이어야합니다.

그런데, 성능 차이는 몇 백 개 이벤트 핸들러와 같은 정상적인 환경에서 현대 엔진에서는 무시할 수 있습니다.

@ 패트릭이 지적했듯이, 수천 개의 요소를 추적하고 이벤트를 가져 오는 데 필요한 몇 가지 특수한 경우에는 재앙이 될 수 있습니다. 이 경우 각각의 이벤트에 대해 선택기를 실행하면 성능이 저하됩니다. 때로는 해당 요소의 컨테이너에 하나의 이벤트 핸들러를 연결하고 e.target을 사용하여 실제로 이벤트의 원인을 찾는 것과 같은 특수 기술을 사용하면 도움이되는 경우가 있습니다.

Answer 2

에 따르면이 jsperf for event triggering performance에 따르면 jquery는 기본 이벤트와 백본 이벤트보다 훨씬 느립니다. 백본 이벤트는 jquery 또는 navtive 이벤트보다 훨씬 빠르게 진행됩니다.