이벤트 등록의 속도를 높이려고합니다. 사람이 최소한의 처리 시간이 소요되는 말해 줄 수 -자바 스크립트에서 이벤트 리스너를 등록하는 가장 효율적인 방법은 무엇입니까
$('#myElement').find('select.foo').on('click', 'option', handler1);
$('#myElement').find('select.bar').on('click', 'option', handler2);
또는
$('#myElement').on('click', 'select.foo option', handler1);
$('#myElement').on('click', '.select.bar option', handler2);
나는 "일부 jsPerf 테스트를 실행"말했다 주석에 동의합니다. 최적화의 첫 번째 규칙은 "조기에 최적화하지 마십시오"입니다. 왜 최적화하고 있습니까? 성능 문제가 있습니까? 당신이 있다면, 당신이 그것을이 코드와 분리 시켰다고 확신합니까? 그것이 프로파일 링이 말한 것입니다. 이이면이 코드를 통해 더 나은 성능을 제공하는 방법을 파악할 수 있습니다.
이벤트 생성기에 가장 가까운 요소에 이벤트 처리기를 연결하기 때문에 첫 번째 버전의 성능이 향상 될 것으로 판단됩니다. 두 번째 버전에서는 이벤트 핸들러를 DOM 트리의 상위 요소에 연결하므로 이벤트가 감지되기 전에 이벤트가 전파되어야하며 이벤트 처리기는 해당 이벤트가 일치하는 요소에서 왔는지 확인하기 위해 필터를 실행해야합니다.
또 다른 방법은 페이지 로딩 타임에 리스너가 필요한 요소를 식별하고 (작업을 수행하는) 첫 번째 버전이 이벤트가 발생할 때 이벤트에 응답 할 요소를 식별하는 것입니다 (운동을하고 잠재적으로 더 많은 일자리를 창출하십시오 - 좋은 이유가있을 수 있습니다; 아래 참조).
비록 두 번째 접근법은 요소가 동적으로 삽입 될 때 사용됩니다.. 동적으로 추가 된 요소에 연결되지 않는 이벤트 핸들러의 문제점을 해결하는 가장 쉬운 방법입니다. 따라서 동적으로 추가 된 요소가있는 경우 두 번째 버전이 최상의 옵션 일 수 있습니다. 단, 성능 고려 사항에도 불구하고.
감사합니다 Ethan - 도움이됩니다. 우리는 성능 문제가 있고 속도가 응용 프로그램의 수익성에 직접적으로 영향을 미치기 때문에 최적화를하고 있습니다. 우리는 ~ 1000 개의 이벤트를 등록했습니다. 그러나 프로파일 링으로 인해 이벤트 등록을 문제로 식별 할 수 없습니다. –
나는 본다. 사실, 실제 등록을 프로파일 링하기는 쉽습니다. 전에 타임 스탬프를 설정하고 등록을 한 다음 타임 스탬프를 비교하면 DOM을 탐색하고 요소를 식별하고 처리기를 추가하는 데 걸리는 시간 (밀리 초)을 알 수 있습니다. AJAX를 제외하고 jQuery 코드는 동기식입니다. –
동일한 객체에 리스너를 연결하면 실제로 청취자를 연결하는 데 시간이 적게 걸리지 만 이벤트를 포착하고 처리하는 프로세스가 느려집니다.
리스너를 대상에 더 가깝게 연결하는 데 시간이 오래 걸리지 만 이벤트가 발생할 때 처리기가 더 빨리 작동합니다. 대답이 질문에
감사합니다 - 가장 효율적인 방법은 사용 Should all jquery events be bound to $(document)?
[바닐라 JS] (http://vanilla-js.com/). – Oriol
일부 jsPerf 테스트를 실행하십시오. – j08691
대신 select 요소에서 변경 이벤트를 수신 대기한다고 생각하십니까? – Undefined