[jQuery] find(), children() 비교해보기

jQuery 소스를 보다 보면 find()가 많이 쓰인다.

find()는 범위를 넓게 검색하고 있다는 걸로 알고 있고 비효율적이라고 생각해 사용하지 않았다.

그래도 제대로 한번 알아보고자 비슷한 두 개의 함수 find()와 children()을 함께 비교해보기로 했다.

 

<ul>
    <li>
        <span>a</span>
    </li>
    <li>
        <span>b</span>
    </li>
    <li>
        <span>c</span>
    </li>
</ul>

 

가장 간단한 예제인 ul, li 태그로 비교해보기로 했다.

<ul> 태그에 <li> 자식 요소 3개가 있고 <li> 요소마다 <span> 자식 요소가 한 개씩 있는 상태다.

 

우선 <ul> 기준으로 <span>을 찾아보기로 했다.

 

console

시작부터 find와 children이 다르게 동작한다.

find는 <span> 태그 3개를 찾았고 children은 찾지 못했다.

 

그렇다면 좀 <li>는 찾을 수 있을까?

 

console

<li> 태그를 찾은 결과는 같았다.

find는 하위 요소를 전체 탐색하여 모두 찾을 수 있고

children은 한단계 아래의 하위 요소만 찾을 수 있다.

간단한 예제로서 find와 children의 차이를 알 수 있었다.

 

find와 children의 속도 차이는 어떨까?

당연히 find의 탐색범위가 넓기 때문에 속도가 느릴 것 같다.

 

console.time("time");

for(var i=0; i<10000; i++) {
    $("ul").find("li");		// case 1 : 20 ~ 22 ms
    $("ul").children("li");	// case 2 : 30 ~ 33 ms
}

console.timeEnd("time");

 

하지만 예상과 다르게 find가 좀 더 나은 성능을 보인다.

왜 이런 결과가 나온걸까?

 

children의 파라미터 selector는 필수 값이 아닌 옵션이다.

selector가 있다면 필터링된 자식 요소를 가져오기 때문에 필터링 과정이 추가되므로 find보다 느렸던 것이다.

 

console.time("time");

for(var i=0; i<10000; i++) {
    $("ul").find("li");		// case 1 : 20 ~ 22 ms
    $("ul").children();		// case 2 : 18 ~ 20 ms
}

console.timeEnd("time");

 

테스트 케이스를 바꿔봤다.

children의 selector를 없애고 자식 요소만 가져올 수 있게 개선해보니 find보다 조금 더 나은 성능을 보였다.

 

하위 요소를 가져올 수 있는 find()와 children()에 대해서 알아봤다.

바로 아래 하위 요소(자식)만 선택하려면 children()을 사용하는 게 좋고

더 아래의 하위 요소(손자)를 찾으려면 find()로 사용하면 될 것 같다.

 

하지만 가급적 id나 class를 활용해 정밀하게 제어하는 게 좋을 것 같다는 생각을 하면서 마무리해본다.