많은 수의 이벤트 핸들러를 사용하면 성능이 저하됩니까?

Question

30 개 이상의 이벤트 처리기가있는 페이지가 있습니다. 이 유사

:

$section.on("click", "a.unselect-all", function() { 
    var $s = $(this).siblings("select"); 
    $s.find("option").removeAttr("selected"); 
    $s.val(""); 
}); 

페이지 자체가 모든 것을 크지 않다. 그러나 응답 시간이 더 많은 이벤트 처리기로 인해 느려졌다고 생각합니다.

Answer 1

먼저이 문제를 이해하는 데 관련된 몇 가지 관련 정보가있는 유사한 질문/답변이 있습니다 (Should all jquery events be bound to $(document)?).

1. 30 + 이벤트 핸들러의 큰 숫자가 아니다 : 여기
   이벤트 핸들러 및 성능의 큰 숫자에 대한 몇 가지 메모입니다. 대부분의 경우, 30 개 이상의 이벤트 핸들러에 대해 걱정할 필요가 없습니다 (선택기가 불쾌한 경우 아래 예외가 발생할 수 있음 참조).
2. 이벤트 처리기를 의도 한 개체에 직접 연결하면 (실제 이벤트 시간에 처리하는 가장 효율적인 방법) 런타임 성능을 최대화합니다.
3. 위임 된 이벤트 처리를 사용하는 경우 이벤트 처리기는 이벤트를 수신하는 실제 개체에 가능한 한 가까운 부모에 배치해야합니다. document 또는 document.body과 같은 최상위 수준의 객체에 모든 위임 된 이벤트 핸들러를 두는 것은 일반적으로 나쁜 생각입니다. 왜냐하면 이벤트 핸들러가 이벤트를 트리거하는 실제 객체에 더 가깝기 때문에 코드가 모든 이벤트에 대해 더 많은 선택기를 살펴야하기 때문입니다 대부분의 이벤트에 대한 선택 자의 대부분을 평가합니다.
4. 위임 된 이벤트 처리를 사용하는 경우 보조 선택기의 성능 (.on()의 두 번째 인수)이 중요합니다. 복잡한 셀렉터로 평가하기가 쉽지 않고 동일한 이벤트에 대해 동일한 객체에 이러한 객체가 많이 첨부되어있는 경우 성능 저하가 발생할 수 있습니다. 정확한 성능 저하 정도는 정확한 상황에 달려 있습니다.

따라서 최악의 경우는 동일한 개체에 모두 연결된 모든 위임 된 이벤트 처리기에 복잡한 보조 선택기가있는 경우입니다. 이것은 이벤트가이 부모 객체에 버블 링되어야하므로 jQuery가이 특정 이벤트에 대해 위임 된 이벤트를 모두 통과해야하며 2 차 선택기 인수를 비교하여 일치하는지 확인해야하기 때문에 최악의 경우입니다. 타겟 객체. 동일한 객체에 이러한 위임 된 이벤트 처리기가 많이 있고 보조 선택기가 다소 복잡한 경우이 모든 것을 처리하는 데 걸리는 시간이 눈에 띄기 시작할 수 있습니다.

---

성능상의 문제와 마찬가지로, 이것이 매우 중요하다면 자체 성능 테스트를 수행해야합니다. 샘플 페이지의 document 개체에 사용하는 것처럼 보조 선택자가있는 30 개의 위임 된 '클릭'처리기를 설치하고 사용해보십시오. 클릭과 클릭에 대한 응답간에 성능 저하가 전혀 없는지 확인하십시오. 100 개의 이벤트 핸들러, 1000 개의 이벤트 핸들러 등을 사용해보십시오. 어디서 눈에 띄는 지 알 수 있습니다.