jquery_in_depth_3

선택자와 성능

기본 선택자의 성능

ID 선택자 >= 클래스 선택자 = 태그 이름 선택자
ID 선택자, 클래스 선택자, 태그 이름 선택자는 가장 속도가 빠르다. 이 3개의 선택자는 다른 선택자와 결합해 사용하지 않기를 추천한다.

후손 선택자와 find() 메서드

특정 요소 내에서 반복해서 선택할 경우 후손 선택자를 반복해서 사용하지 말고, 선택 범위를 미리 선택하여 캐싱하고 find() 메서드를 활용하는 편이 바람직하다.

jQuery 확장 선택자

jQuery에서 사용하는 모든 선택자가 CSS 표준스펙을 만족하지 않는다. 표준 CSS 스펙에는 없지만 jQuery에서 사용하는 선택자는 jQuery 확장 선택자(jQuery Extension selector)라고 부른다.

jQuery 확장 선택자는 가능하면 사용하지 않는 것이 바람직하며 사용해야만 하는 경우라면 다른 선택자와 결합하여 사용하는 것이 바람직하다. 또한 jQuery 확장 선택자를 사용할 때 find()와 같은 횡단 탐색 메서드를 적극 활용하는 것도 좋은 방법이다. 우선 실행 속도가 빠른 선택자를 사용하여 최종적으로 선택해야 할 요소를 찾을 범위를 좁힌 후에 filter()나 find()와 같은 횡단 탐색 메서드를 이용하는 것이 바람직하다.

요약

이미 선택된 요소가 있다면 $() 함수를 호출할 필요 없이 요소에 직접 접근하는 것이 성능을 높이는 방법이다. 성능이 최우선 고려 사항이라면 네이티브 API를 사용하자. jQuery를 사용하는 것보다 빠르다. 다만 성능이 중요한 고려 사항이 아니라면 jQuery를 사용하는 것이 개발 생산성 향상, 크로스 브라우저 지원등의 장점을 얻을 수 있다.

jQuery Optimize Selectors (번역)

selector 최적화는 예전보다 중요하지 않다. 많은 브라우저가 document.querySelectorAll()를 구현하여 선택 이동에 대한 부담이 jQuery에서 브라우저로 이동하였다. 그러나, selector 성능에 병목현상이 발생할 때 염두해 두어야 할 몇 가지 팁이 있다.

jQuery Extensions
가능하면 jQuery extenstion을 포함하는 selector를 사용하지 마라. 이러한 확장은 native `querySelectorAll() DOM 메서드에서 제공하는 성능 향상을 이용할 수 없기 때문에, jQuery에서 제공하는 Sizzle selector 엔진을 사용해야 한다.

// Slower (the zero-based :even selector is a jQuery extension)
$( "#my-table tr:even" );
 
// Better, though not exactly equivalent
$( "#my-table tr:nth-child(odd)" );

위의 예제 처럼 :even을 포함한 CSS 스펙에서 제공하지 않는 많은 jQuery extensions이 있다. 일부 상황에서는 이러한 확장의 편리성이 성능 비용보다 중요할 수 있다.

Avoid Excessive Specificity

$( ".data table.attendees td.gonzalez" );
 
// Better: Drop the middle if possible.
$( ".data td.gonzalez" );

Selector 엔진은 요소를 찾을 때 탐색할 레이어가 적기 때문에 보다 좋은 DOM은 성능 향상시키는데 도움을 준다.

link ID-Based Selectors
선택기를 ID로 시작하는 것이 안전한 방법이다.

// Fast:
$( "#container div.robotarm" );
 
// Super-fast:
$( "#container" ).find( "div.robotarm" );

첫번째 접근 방식은 jQuery는 document.querySelectorAll()을 사용하여 DOM을 쿼리한다. 두번째 접근 방식은 document.getElementById()를 사용한다. 속도 향상은 후속으로 사용된 find() 때문에 줄어들지만 성능은 더 빠르다.

Optimize Selector