jQuery에서 선택된 요소를 재사용하는 가장 효율적인 방법

Question

이론에 기반한 정답을 상상할 수 있지만 일부 확인 만 찾고 있습니다. jQuery에서 선택한 요소를 가장 효율적으로 재사용하는 방법이 무엇인지 궁금합니다. 예를 들어 :

$('#my_div').css('background','red'); 
//some other code 
$('#my_div').attr('name','Red Div'); 

대

myDiv = $('#my_div'); 
myDiv.css('background','red'); 
//some other code 
myDiv.attr('name','Red Div'); 

나는이없는 #my_div 요소가 두 번 이상 발견 얻을 때문에 두 번째 예제가 더 효율적입니다 가정합니다. 그 맞습니까?

마찬가지로, 먼저 'obj'와 같은 변수에 $ (this)를 저장 한 다음 $ (this)를 반복해서 사용하는 대신 'obj'를 다시 사용하는 것이 더 효율적입니까? 이 경우, jQuery는 반복적으로 요소를 찾지 않아도되지만 이것을 강제로 jQuery 객체 [$ (this)]로 변환해야합니다. 따라서 일반적으로 jQuery 객체를 두 번 이상 사용하면 변수에 저장해야합니까?

Answer 1

jQuery 선택기 (like $('#element'))를 사용하는 경우 항상 결과를 저장해야합니다.

오브젝트를 사용하고 있는데 (예 : $(this)) jQuery에서 래핑하는 경우 jQuery가 해당 요소를 다시 검색 할 필요가 없으므로 필요하지 않습니다.

Answer 2

DOM 통과 횟수를 제한하도록 코드를 작성해야합니다.

$('#my_div').css('background','red'); 
//some other code 
$('#my_div').attr('name','Red Div'); 

당신은 두 번 #my_div을 발견하고, 비효율적이다 :

당신이 뭔가를 쓸 때.

당신은 (즉, var x = $('.something')를) 중 하나 선택의 결과를 지정하여이 문제를 개선하고 변수 x를 조작하거나 당신의 방법은 다음과 같이 호출 체인 수 있습니다 :

는

$('#my_div').css('background','red').attr('name','Red Div'); 

당신은를 볼 수 있습니다 위의 코드는 많이 사용되었습니다. 요소를 한 번 찾았 기 때문입니다. css() 메서드는 의 CSS 스타일을 적용하고을 실제 결과 인 $('#my_div')으로 반환하므로 다른 방법 (이 경우 attr())을 호출 할 수 있습니다.

셀렉터의 재사용을 처리하기 위해 내가 선호하는 방법은 변수로 저장하고 클로저에 물건을 담는 것입니다.

Answer 3

이것은 이벤트 처리기에서 반환 된 요소에 jQuery 함수를 적용하는 경우에도 적용됩니다. $ (...)을 너무 많이 적용하는 것을 피하십시오. 너무 느리기 때문에 시도하십시오. 대신 $ (...)의 결과를 포함하는 변수를 만듭니다. 좋은 연습은 $로 변수를 시작하는 것입니다.이 변수는 변수 안에 jQuery 객체에 대한 힌트를줍니다.

$('a').click(function(){ 
    var $this = $(this); 
    $this.addClass("clicked"); 
    $this.attr("clicked", true); 
}); 

Answer 4

일반적으로 간과되는 것은 jQuery 체인이 얼마나 강력한 지입니다. 그렇게 눈에 띄지 않을 수도 있지만 jQuery가 래핑 된 요소를 체인 내에서 캐시하기 때문에 요소를 수정하고보다 구체적인 하위 집합으로 이동 한 다음 수정 한 다음 많은 오버 헤드없이 일반 수퍼 집합으로 돌아갈 수 있습니다.

내가 좋아하는 뭔가 더 나은 성능 현명한

에도 이상이

var $myDiv = $('#myDiv').addClass('processing'); 
var $myInput = $('#myDiv #myInput').hide('slow'); 
    $myDiv.removeClass('processing');