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




removeattr (2)

각 코드를 실행하는 데 걸리는 시간을 밀리 초 비교하여 성능을 측정 할 수 있습니다. 변수를 사용하여 실행하면 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>

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

$('#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 % 느려집니다.





performance