jQuery 선택기와 로컬 변수의 비교

Question

jQuery 선택기 결과를 함수 범위에서 두 번 이상 액세스해야 할 때 선택기를 한 번 실행하고 로컬 변수에 할당하는 것이 좋습니다?

여기에 내 진부한 예를 용서해주세요. 그러나 나는 그 질문을 보여줍니다. 그래서,이 코드는 더 빠르게 수행합니다

var execute = function(){ 
    var element = $('.myElement'); 
    element.css('color','green'); 
    element.attr('title','My Element'); 
    element.click(function(){ 
     console.log('clicked'); 
    }); 
} 

이 코드를보다 : 차이가없는 경우

var execute = function(){ 
    $('.myElement').css('color','green'); 
    $('.myElement').attr('title','My Element'); 
    $('.myElement').click(function(){ 
     console.log('clicked'); 
    }); 
} 

는, 사람이 이유를 설명 할 수 있습니까? jQuery를 선택하면 요소를 캐시하기 때문에 후속 셀렉터가 DOM 검색을 다시 할 필요가 없다.

Answer 1

일, 시간과 시간을 연결된 확실히 빠릅니다.

http://jsperf.com/caching-jquery-selectors

후자의 경우, 귀하의 선택기를 재정의 35 % 느리게 ~로보고됩니다 : 여기 증거로 만들어진 시험입니다.

Answer 2

로컬 변수에 참조를 저장하는 것은 매번 선택 코드를 실행하는 것보다 빠릅니다. 변수에 저장할 때 적절한 요소를 찾기 위해 ANY 코드를 실행하지 않아도되는 문제입니다. 내 경험에 비추어 볼 때, jQuery를 두 번 이상 사용할 경우 jQuery 조회 결과를 변수에 저장하는 것이 중요하다.

Answer 3

여기에 또 다른 옵션은 선택을 반복하는 대신 each을 사용하는 것입니다, 그리고 그것은 선택 기준, 당신의 첫 번째 경우를 재사용 다시

var execute = function(){ 
    $('.myElement').each(function() { 
     var elem = $(this); 
     elem.css('color','green'); 
     elem.attr('title','My Element'); 
     elem.click(function(){ 
     console.log('clicked'); 
     }); 
    }); 
} 

Answer 4

이 일을 잊지 말라 : 당신은 실제로 정말 캐시 접근 방식을 망각하고

var execute = function(){ 
    $('.myElement') 
     .css('color','green') 
     .attr('title','My Element') 
     .click(function(){ 
      console.log('clicked'); 
     }); 
} 

Answer 5

합니다.

jQuery의 경우 초기 조회 : $('.selector')은 비용이 많이 듭니다. 그러나 그 후에, 당신의 행동을 그것에 연결 시키거나 변수에 할당하고 변수에 당신의 행동을 실행하는 것은 그다지 중요하지 않습니다. 얻을 수있는 주요 성능 향상은 요소를 더 캐싱하고 함수 호출의 각 반복을 jQuery 선택기에 할당하지 않는 것입니다.

var element = $('.myElement'); 
var execute = function(){ 
    element.css('color','green'); 
    element.attr('title','My Element'); 
    element.click(function(){ 
     console.log('clicked'); 
    }); 
} 

이 접근법은 제안 된 다른 접근법 중에서 가장 빠른 버전보다 거의 두 배 빠릅니다.

는 http://jsperf.com/caching-jquery-selectors/17

참조 참고 :이 수명의 동안 DOM 변경, 당신은 요소의 새로운 선택과 element 변수를 업데이트 할 수 있습니다.