jquery 선택기를 최적화하십시오.

Question

일부 선택자는 querySelectorAll()을 사용하여 obtimised 될 수 있음을 읽었습니다. 이 예입니다.

$('a.button:animated'); // Does not use querySelectorAll() 
$('a.button').filter(':animated'); // Uses it and faster. 

그리고 난이 셀렉터가 :

$('input[name="annoncedby"]:radio').on('change',function(){ 
    .... 
} 

내가 그런 식으로 그것을 사용 :

$('input[name="annoncedby"]').filter(':radio').on('change',function(){ 
    .... 
    } 

하지만 빨리하지, 어떻게이 작업을 수행 할 수 있습니다 빠른 감사 할 수 있습니까?

Answer 1

다른 방법은 모든 라디오 버튼의 조상에 부착 된 위임 된 이벤트 처리기를 사용하는 것입니다. 그것은 change 이벤트를 수신 대기 하나의 이벤트 핸들러을 적용하여 작동

$('#someparentid').on('change', 'input[name="annoncedby"]:radio', function(){ 
    .... 
}); 

:

이 훨씬 빠르게 초기 이벤트 인맥 및 이벤트 시간에서 속도 에서 눈에 띄는 감소를 제공 할 것입니다 조상 요소에 버블을 적용하려면 다음은 버블 체인의 요소에 jQuery 선택기를 적용한 후 ,은 에 함수를 적용합니다. 이벤트를 일으킨 요소가 일치하는 경우. 이벤트 응답은 사용자 인터페이스 속도에서만 발생하기 때문에이 방법을 사용하는 데 실제적인 단점이 없습니다.

이벤트 등록의 속도 차이에 대한 아이디어를 제공하기 위해 JSPerf 테스트를 @Musa에서 업데이트했습니다. HTML에 추가 된 유일한 것은 처리기를 연결할 부모 요소입니다.

JSPerf :이 http://jsperf.com/queryselectorvssizzle/2

Answer 2

standards-based query selectors을 사용하는 경우에는 지글 거리지 않아야하고, sizzle-only selector을 사용해야하는 경우에는 자체 절에 추가하고 JQuery는 최적화를 수행 할만큼 똑똑합니다.

이 코드

최대 성능을 보장, 모두 JQuery와 우회 :

"use strict"; 
 

 
// various ways to select the element 
 
var radios = document.querySelectorAll('[name="annoncedby"]'); 
 
//var radios = document.querySelectorAll('input[name="annoncedby"]'); 
 
//var radios = document.querySelectorAll('input[name="annoncedby"][type="radio"]'); 
 

 
for (var i in radios) { 
 
    radios[i].addEventListener('change',function(event){ 
 
    alert(this.value); 
 
    }); 
 
}

<form> 
 
    <input type="radio" name="annoncedby" value="daryl" /> 
 
    <input type="radio" name="annoncedby" value="pete" /> 
 
</form>