Find/Children 대 자손 선택기 jquery 성능 차이

Question

this jsperf test의 스 니펫 중 하나가 다른 것보다 현저히 느린 이유를 이해하려고합니다.

이

은 네 조각입니다

$(".menu-vertical li.selected > ul.static").show().parents().show(); 

$('ul.root').find('li.selected').children('ul.static').show().parents().show(); 

$("ul.root li.selected > ul.static").show().parents().show(); 

$('ul.root li.selected').children('ul.static').show().parents().show(); 

두 번째는 모든 브라우저에서 일관되게 느린 것 같다 나는 이유를 이해하지 않습니다.

Answer 1

두 번째는 다른 것들과 다른 점은 무엇입니까?

$('ul.root')    // you get the collection of all `ul.root` 
    .find('li.selected') // in each collection you search for `li.selected` 
    .children('ul.static') // you get `ul.static` children elements of each found 
    ... 

몇 번 반복해야하는지주의하십시오. 다른 모든 예제에서 대부분의 검색은 단일 쿼리에서 수행되며 여러 번 더 빠르게 평가됩니다.

Answer 2

가 나는 성능을 위해 두 가지 예

1) find() vs Direct Child(>) selectors vs Child selector 

Perfomance 시험 1 개 http://jsperf.com/jquery-child-selector-vs-find/2

2) find() vs Descendant selectors vs Child selector 

Perfomance 시험 2 http://jsperf.com/jquery-child-selector-vs-find/9

Answer 3

아동 문제의 수를 부여했다. $el.children('selector') 수행 더 나은 몇 아이들과 함께

더 많은 (말> 10) 어린이와

$el.find('> selector') 수행한다.

children()은 모든 자식을 반복하여 주어진 selector를 테스트하기 때문입니다.