javascript 추가 요소에 액세스해야 할 때마다 jQuery를 호출하지 않아 오버 헤드를 줄일 수 있습니까?




removeattr (3)

이 코드 블록이 있다고 가정 해 보겠습니다.

$('#myBox').css('background', 'grey');
$('#myBox').click( function(e){ console.log( 'Box clicked' ); });
$('#myBox').html(' Just a test text ');

지금까지 내가 아는 것은 모든 라인에서 myBox ID를 가진 요소를 찾고 있다는 것이다. 질문 : HTML 요소에 대한 여러 참조가있을 때 변수 생성의 이점이 있습니까?

아니면 변수가 여전히 액세스 할 때마다 연결된 요소를 검색합니까? 예:

var $myBox = $('#myBox');

$myBox.css('background', 'grey');
$myBox.click( function(e){ console.log( 'Box clicked' ); });
$myBox.html(' Just a test text ');

셀렉터 참조를 재사용하면 두 번째 케이스가 확실히 빠릅니다. 테스트는 다음과 같습니다. http://jsperf.com/caching-jquery-selectors 후자의 경우 셀렉터를 다시 정의하면 ~ 35 % 느려집니다.


var $myBox = $('#myBox');

더 효율적이지만 '#myBox' 가 동적으로 변경되면 더 나쁠 수 있습니다. var $myBox 를 저장하고 '#myBox' 변경하면 var $myBox 를 수동으로 재 할당해야하므로 대규모 응용 프로그램의 경우 문제가됩니다. 일반적으로 나는 전체 응용 프로그램 대신 하나의 함수 범위 내에서 그러한 최적화를 유지하는 것이 낫다고 말합니다.

plunkr 아주 간단한 예제가 있습니다. 좀 더 현실적인 것은 API 호출에 따라 내용이 변경 될 때입니다.


각 코드를 실행하는 데 걸리는 시간을 밀리 초 비교하여 성능을 측정 할 수 있습니다. 변수를 사용하여 실행하면 jquery 요소를 처음으로 할당하기 때문에 성능이 향상됩니다.

var time = new Date().getTime();
$('#myBox').css('background', 'grey');
$('#myBox').click( function(e){ console.log( 'Box clicked' ); });
$('#myBox').html(' Just a test text ');
console.log('Miliseconds without variable',new Date().getTime() - time);

var time2 = new Date().getTime();
var $myBox = $('#myBox2');

$myBox.css('background', 'grey');
$myBox.click( function(e){ console.log( 'Box clicked' ); });
$myBox.html(' Just a second text ');
console.log('Miliseconds with variable',new Date().getTime() - time2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myBox"></div>
<div id="myBox2"></div>





performance