jQuery 선택기 또는 변수간에 성능 차이가 있습니까?

Question

최근에 나는 선택기를 반복해서 반복하는 것 사이에 또는 VAR을 사용하고 선택기를 저장하고 그것을 참조하는 것 사이에 성능 차이가 있는지 궁금합니다.

$('#Element').dothis();

$('#Element').dothat();

$('#Element').find('a').dothat();

아니면 그냥

var Object = $('#Element');

Object.dothis();

Object.dothat();

$('a', Object).dothat();

두 번째 방법은 깨끗해 보이고 유지 관리가 더 좋기 때문에 선호합니다.

Answer 1

Sizzle은 매번 실행할 필요가 없지만 기능 차이도 있습니다. DOM이 첫 번째 호출과 3 번째 호출 사이에 변경되는 경우 캐시 된 jQuery 객체에는 여전히 기존 요소 세트가 포함됩니다. 세트를 캐시한 다음 콜백에서 사용하면 종종 발생할 수 있습니다.

Answer 2

나는 두 번째 방법을 선호합니다. 그럴 것입니다 코드를 유지하기가 더 쉽습니다 요소 ID 또는 클래스가 변경 되더라도.

Answer 3

또 다른 빠른 방법이 있습니다. 두 번째 코드만큼 빠릅니다.

$('#Element')
   .dothis()
   .dothat()
   .find('a')
      .dothat();

Answer 4

Ghommey의 방법에 대한 소비

var Object = $('#Element');

Object
   .dothis()
   .dothat()
   .find('a')
      .dothat();

더 빠르고 나중에 사용하기 위해 객체를 저장합니다.

Answer 5

두 번째 방법은 성능 이점이 있습니다. 좋거나 좋지 않을 수도 있지만 더 좋습니다. 첫 번째 버전에서는 Dom Traversal을 4 번 수행하고 두 번째로 2 만 수행합니다.

jQuery 속도를 높이는 것에 대한 꽤 좋은 기사 : http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instally-instally-increase-your-jquery-performance/

Answer 6

jQuery 선택의 결과를 변수에 저장하는 것이 더 빠릅니다. jQuery가 액세스 할 때마다 결과를 조회 할 필요가 없기 때문입니다.

나는 몇 가지 성능 지표를 정리했습니다. http://jsperf.com/jquery-selectors-vs-stored-variable

Mac OS X 10.8.2에서 Chrome 26.0.1410.63 :
선택 : 40,276 OPS/SEC
변수 저장 : 594,031,358 OPS/SEC