2011-11-05 4 views
3

식별자를 추가 할 때보 다 ID 전용 (또는 단일 식별자)으로 빠르게 선택하고 있습니까?jQuery 선택기 속도

$('body div#container div#element')

:

$('#container #element')

또는 더 구체적인 대 예를

$('#element')

를 들어

?

+0

@john_doe 전화 : 정확 하 게, 적어도 세 번째는 [모든'div' 요소를 얻을 것이다 다음 'ID를 가진 사람을 필터링 element' ] (http://jsfiddle.net/dFC4k/1/). 두 번째 경우에도 [jQuery는'# element'가'# container'의 자손인지 테스트합니다.] (http://jsfiddle.net/dFC4k/). –

+0

@FelixKling : 그럼 내가 찾을 수없는 기사를 잘못 읽고 (... 찾을 수 없음) 지글 거리기 소스에서 주석을 잘못 해석했습니다. // 루트 선택기가 ID 인 경우 바로 가기를 취하고 컨텍스트를 설정하십시오 // (내부 선택기가 ID 인 경우 더 빠를 것입니다.)'- 설명해 주셔서 감사합니다. – Andreas

답변

3

$('#element')이 가장 빠릅니다. 그 다음에 $('div')이옵니다. 이것들은 네이티브 함수 document.getElementByIddocument.getElementsByTagName에 매핑됩니다. 더 복잡한 것은 복잡한 스크립팅 및 문서 검색을 거쳐야합니다.

IE6, 7 및 8을 제외한 모든 항목에서 $('.class')도 새로운 document.getElementsByClassName 기능에 매핑되지만 다른 두 가지보다 느리며 브라우저가 지원하지 않는 경우 여전히 지글지를 사용해야합니다.

+0

이미 jQuery 객체가 있고 .find ('# 요소')를 사용하면 어떨까요? ID는 고유해야하므로 실제로는 중요하지 않지만 백본을 사용하고 있으며 뷰 바인딩 된 jQuery (.find()를 사용) 대신 글로벌 jQuery를 사용하지 않습니다. –

5

예, jQuery (또는 Sizzle)에서 직접 getElementById을 사용할 수 있으므로 ID로만 선택하는 것이 가장 빠릅니다. 그렇지 않으면 나머지 셀렉터도 오른쪽에서 왼쪽으로 평가해야합니다.

1

처리 할 요소를 올바르게 식별 할 수있는 선택기를 항상 사용하려고 시도해야합니다. 예를 들어 element이 고유 한 ID 인 경우, #element은이를 고유하게 지정하며 구문 분석 및 처리 오버 헤드에서 모두 낭비입니다. (이 경우 선택기의 최적의 선택이 jQuery를 사용하는 경우 다를 수 있지만 이것은 물론 CSS 스타일 규칙에 대한 동등하게 간다.)

1

는 사실

document.getElementById("element");

가 가장 빠른

를 호출. 당신이 정말 jQuery를 개체를 원하는 경우

다음 $(document.getElementById("element"));

Benchmark