jQuery에서 가장 빠른 어린이() 또는 찾기()는 무엇입니까?

jQuery에서 가장 빠른 어린이() 또는 찾기()는 무엇입니까?

jQuery에서 자식 노드를 선택하려면 자식 노드()를 사용할 수도 있지만 찾을 수도 있습니다.

예:

$(this).children('.foo');

는 다음과 같은 결과를 제공합니다.

$(this).find('.foo');

이제 어떤 옵션이 가장 빠르거나 선호되며 그 이유는 무엇입니까?

children() 노드 아래의 전체 DOM을 통과하는 동안 노드의 직접 자식만 살펴봅니다.children() 동일한 구현을 고려할 때 더 빨라야 합니다.하지만,find()기본 브라우저 방법을 사용하는 동안children()브라우저에서 해석되는 JavaScript를 사용합니다.제 실험에서는 일반적인 경우에 성능 차이가 별로 없습니다.

사용할 방법은 DOM에서 이 노드 아래의 모든 노드 또는 직계 하위만 고려할 것인지에 따라 달라집니다. 즉, 메서드의 속도가 아니라 원하는 결과에 따라 적절한 메서드를 선택합니다.성능이 정말로 중요한 문제라면, 최상의 솔루션을 찾고 이를 사용하기 위해 실험해 보십시오(또는 여기에 있는 다른 답변의 일부 벤치마크 참조).

이 jsPerf 검정은 find()가 더 빠르다는 것을 나타냅니다.저는 더 철저한 테스트를 만들었고, 여전히 find()가 어린이()를 능가하는 것처럼 보입니다.

업데이트 : tvanfosson님의 코멘트에 따라 16단계의 네스팅으로 테스트 케이스를 하나 더 만들었습니다.find()는 가능한 모든 div를 찾을 때만 느리지만 find()는 div의 첫 번째 수준을 선택할 때 여전히 children을 능가합니다.

children()은 100개 이상의 중첩 수준이 있고 find()가 통과할 수 있는 약 4000개 이상의 div가 있을 때 find()를 능가하기 시작합니다.초보적인 테스트 사례이지만 그래도 대부분의 경우 find()가 child()보다 빠르다고 생각합니다.

Chrome Developer Tools의 jQuery 코드를 살펴보니 내부적으로 child()가 bister(), filter()에게 호출하고 find()보다 정규식을 몇 번 더 거치는 것을 알 수 있었습니다.

find()와 children()은 서로 다른 요구를 충족하지만 find()와 children()이 동일한 결과를 출력하는 경우 find()를 사용하는 것이 좋습니다.

여기 실행할 수 있는 성능 테스트가 있는 링크가 있습니다. find()실제로는 보다 약 2배 더 빠릅니다.children().

이들이 반드시 동일한 결과를 제공하는 것은 아닙니다.find()모든 하위 노드를 얻을 수 있지만,children()일치하는 즉시 자녀만 얻을 수 있습니다.

순간, 어느순간,간순,find()직계 하위 노드뿐만 아니라 일치할 수 있는 모든 하위 노드를 검색해야 했기 때문에 속도가 훨씬 느렸습니다.은 더 ; 하만지, 이은더이사아닙다니실이상것다.find()기본 브라우저 방법을 사용하기 때문에 훨씬 빠릅니다.

다른 어떤 답변도 사용 사례를 다루지 않았습니다..children()또는.find(">")상위 요소의 직계 자식만 검색합니다.그래서 저는 아이들을 구별하기 위해 세 가지 다른 방법을 사용하여 jsPerf 테스트를 만들었습니다.

공교롭게도 여분의 ">" 선택기를 사용할 때에도.find()여전히 훨씬 더 빠릅니다..children()내 시스템에서, 10배 정도.

그래서, 제 관점에서, 필터링 메커니즘을 사용할 이유가 별로 없어 보입니다..children()조금도.

둘다요.find()그리고.children()메소드는 일치하는 요소의 하위를 필터링하는 데 사용됩니다. 단, 전자는 모든 레벨 아래로 이동하고 후자는 단일 레벨 아래로 이동합니다.

단순화 방법:

1. find()일치하는 요소들의 자녀, 손자, 증손자...모든 레벨이 내려갑니다.
2. children()일치하는 요소의 하위 항목만 검색합니다(단일 수준 아래).

죄송하지만 제 경험이 여기에 있는 대부분의 답과 일치하지 않을 것이기 때문에 여기에서 공유하고 사람들에게 자신의 사용 상황에 대한 테스트를 제안하는 것이 흥미롭다고 생각합니다.

는 방금 제으로써 약 40.$(...).find()타고$(...).children().

항목의 실제 중첩은 매우 낮았고(최대 3단계), 이러한 하위 항목에도 불구하고() 훨씬 더 효율적입니다.

둘 다 그리드(수천 개로 구성)에서 정보를 검색하기 위해 수천 번 호출되었습니다.그 목적은 주로 셀 내용에 따라 셀/열/행에 스타일링을 적용하는 것입니다.

find()를 대체하기 전에 Firefox에서 그리드의 로드 시간은 2100 - 2400ms였습니다.아이들()과의 변화 이후 1300~1500ms 사이로 감소했습니다(따라서 30%~40% 감소).

하지만 Chrome의 경우 안타깝게도 그렇게 설득력이 없습니다. Chrome은 정확히 같은 것을 처리하는 데 훨씬 느리고(8초), 이 변화 전후에 뚜렷한 성능 차이가 없습니다.

언급URL : https://stackoverflow.com/questions/648004/what-is-fastest-children-or-find-in-jquery