jquery 상위 자손 선택기

Question

2가 1보다 빠른 이유는 무엇입니까?

1. $('#p1').find('span');
2. $('#p1 span');

Answer 1

jQuery 1.4에서 셀렉터가 id 선택기 (예 : #p1)인지 확인합니다.

• 실제적으로 document.getElementId(...)이 호출되고 결과가 jQuery 유틸리티 객체로 래핑되고 반환됩니다.
• 그 외의 경우라면, jQuery는 Sizzle을 호출하여 요소를 찾는 작업을 수행합니다. 그리고 출처에서 판단 해 볼 때, 이것은 꽤 사소한 것들입니다.

Answer 2

가장 좋은 방법은 테스트하는 것입니다! 이 간단한 테스트에서

:

• 콘텐츠 - ​<p id="p1"><span>Test</span></p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
• 이 반복 10 회

• 버전 : jQuery를 1.4.2

• $('#p1').find('span'); : 2601ms

• $('#p1 span'); : 1998ms

이 경우 단일 선택기가 더 빠르다. jQuery를 통해 많은 호출을하는 것이 바람직하지 않기 때문이다.

Give it a try here, look at your console.

• $('#p1').find('span'); : 3225ms
• $('#p1 span'); : 2082ms

Try it out with 1.3.2 here 당신이 jQuery를 1.3.2에있어 CAE에서

---

는 여기 결과입니다.

Answer 3

아마도 # 1은 # 2보다 빠르지 만 반복 횟수와 검색 할 요소 수에 따라 # 2는 다른 시나리오에서는 # 1보다 빠를 수 있습니다.

예 : span 개의 요소가 있고 #p1에 다른 요소가없는 경우 find는 많은 CSS 일치를 수행하지 않으므로 # 1이 # 2보다 빠를 것이라고 추측합니다. 하지만, 만약 당신이 1000 span 엘리먼트를 가지고 있고, 2000 년에 다른 엘리먼트 인 #p1을 가지고 있다면, 모든 엘리먼트를 두 번 반복 할 필요가 없으므로 # 2가 더 빠를 것이라고 확신합니다.