더 빠른 jQuery : 선택기 또는 메서드?

Question

$('mySelector:first'); 및 $('mySelector').first();이 있다고 가정 해 봅니다. 어떤 방법이 가장 효율적입니까? 나는 근원을 보았지만 여전히 그것을 알 수 없었다.

그것은 첫 번째 경우처럼 보이는 첫 번째 때까지 jQuery를 모든 항목을 통과 : 두 번째 경우 jQuery를 슬라이스에서

CHILD: function(elem, match) { 
     var type = match[1], 
     node = elem; 
     switch (type) { 
      ... 
     case "first": 
      while ((node = node.previousSibling)) { 
      if (node.nodeType === 1) { 
      return false; 
      } 
      } 
      if (type === "first") { 
      return true; 
      } 
      node = elem; 
       ... 
     } 
} 

수집,하지만 난 그것이 얼마나 효율적 확실하지 않다 :

내 테스트에서

function first() { 
    return this.eq(0); 
}; 

function eq(i) { 
    return i === -1 ? 
    this.slice(i) : 
    this.slice(i, +i + 1); 
}; 

Answer 1

현재 허용 대답은 tests across many browsers이 .first() 및 .eq(0)에 :first 및 :eq(0) 비교와 일치하지 않습니다. 현재 주요 데스크톱 브라우저의

:
$('foo').first()는 거의 4 배 빠른

당신은 방법론, here are the tests and their current results을 검사하려면 $('foo:first')보다.

Answer 2

, $('mySelector:first');는 $('mySelector').first();

당신이 할 수있는 것보다빠른 또한 this에 관심이 있습니다.

Answer 3

$('li:first') ~ $('li').first()을 비교해보십시오. 첫 번째 것은 빠릅니다. 예를 들어, 100 li을 포함하는 문서에서 두 번째 쿼리는 단순히 100 개의 항목 목록을 만든 다음 첫 번째 쿼리를 반환합니다. 반면에 첫 번째 쿼리가 반환 된 후 바로 첫 번째 쿼리가 중단됩니다.

쿼리가 브라우저에서 기본적으로 처리되는 경우에도 첫 번째 쿼리보다 많은 메모리가 필요합니다.

Answer 4

둘째는 선택기에서 첫 번째 항목을 가져 오기 전에 모든 항목을 가져와야합니다. 따라서 셀렉터가 10,000 개 항목 인 경우 10,000 개를 모두 가져온 다음 해당 그룹의 첫 번째 항목을 가져옵니다. 첫 번째 검색 결과가 검색 될 때 필터링되고 첫 번째 검색 결과가 발견 된 후 중지되므로이 점에있어서 첫 번째 검색이 더 나을 것이라는 희망이 있습니다. 아마 대부분의 경우 사소한 것입니다. 이 기능을 체인 경우

물론 그것은 피할 수 :

$('.someclass').addClass('otherClass').first().addClass('firstClass');