jQuery, 성능 현명한 getElementById 또는 jquery selector가 더 빠릅니까?

Question

성과가 현저하게 좋은 것은 document.getElementById('elementId') 또는 $('#elementId')입니까? 혼자서 속도를 계산하려면 어떻게해야합니까?

Answer 1

는, 네이티브에서 getElementById는 훨씬 빠르지 만, jQuery를 당신에게 물건을 많이 매우 편리한 액세스를 제공합니다. 그래서, 당신은 같은 것을 사용하는 것이 좋습니다 : 당신에게 더 나은 성능을 제공합니다

$(document.getElementById("some_id")).jQueryCall(); 

이, 그리고 같은 시간에, 당신이 jQuery를 사용할 수 있습니다.

Answer 2

네이티브 코드를 사용하므로 getElementById가 빠릅니다. jQuery 셀렉터는 getElementById를 사용하지만 먼저 텍스트에 대해 많은 테스트와 비교를해야한다.

Answer 3

물론 getElementById는 빠르지 만 jQuery를 사용하면 많은 작업을 수행 할 수 있습니다.

테스트하려면 각 루프를 10k 번 반복하고 전후의 타임 스탬프를 비교해보십시오.

Answer 4

네이티브 getElementById가 빠릅니다. Jquery 선택기 엔진은 모든 #x 선택기에 대해이를 래핑합니다.

방화 광 콘솔을 사용하여 다음과 같은 방법으로 jquery를 프로파일 링 할 수 있습니다. getElementById와 같은 기본 api 호출에서 잘 작동하는지 확신하지 못합니다.

성능 염려되는 경우

console.profile(); 
$('#eleId'); 
console.profileEnd(); 

Answer 5

jquery와 dom 사이의 성능을 테스트하려는 경우 http://jsperf.com/을 사용하십시오. 그러나 jquery는 dom을 기반으로하므로 모든 것이 느려집니다.

Answer 6

나는 똑같은 질문을하는 동안이 포스트를 우연히 발견했다. .. 빠른 테스트 스크립트를 노크하기로 결정했다. 그것을 달려라. 그것을 시험해보고, 내 마음을 불었다!

실행 $(document.getElementById("test")).somejQueryCall()으로 1

: 552 밀리 초 $("#test").somejQueryCall()와

: 881 밀리 초 $(elem).somejQueryCall()와

var now = Date.now(); 
var diff = 0; 
console.log(now); 

for(var i=0; i < 1000000; i++) 
{ 
    if($(document.getElementById("test")).css('opacity') == '0.2') 
     $(document.getElementById("test")).css('opacity', '1'); 
    else 
     $(document.getElementById("test")).css('opacity', '0.2'); 
} 

diff = Date.now() - now; 
console.log('With $(document.getElementById("test")).somejQueryCall(): ' + diff + ' milliseconds'); 

//////////////////////////////////////////////////////////////////////// 

var now2 = Date.now(); 
var diff2 = 0; 
console.log(now2); 

for(i=0; i < 1000000; i++) 
{ 
    if($("#test").css('opacity') == '0.2') 
     $("#test").css('opacity', '1'); 
    else 
     $("#test").css('opacity', '0.2'); 
} 

diff2 = Date.now() - now2; 

console.log('With $("#test").somejQueryCall(): ' + diff2 + ' milliseconds'); 

//////////////////////////////////////////////////////////////////////// 

var now3 = Date.now(); 
var diff3 = 0; 
var elem = $("#test"); 
console.log(now3); 

for(i=0; i < 1000000; i++) 
{ 
    if(elem.css('opacity') == '0.2') 
     $(elem).css('opacity', '1'); 
    else 
     $(elem).css('opacity', '0.2'); 
} 

diff3 = Date.now() - now3; 

console.log('With $(elem).somejQueryCall(): ' + diff3 + ' milliseconds'); 

이 스크립트를 실행 한 후, 나는 다음과 같은 결과를 얻었다 : 1317 밀리 초,

경기 2

함께 $(document.getElementById("test")).somejQueryCall() : 520 밀리 $("#test").somejQueryCall() 함께

: 855 밀리 $(elem).somejQueryCall() 함께

: 1,289 밀리

경기 3

,210 $(document.getElementById("test")).somejQueryCall()으로 : 565 밀리 초 $("#test").somejQueryCall()와

: $(elem).somejQueryCall()와

936 밀리 초 : 1445 밀리 초

나는 차이를 믿을 수 없어! 그냥 이것을 공유해야했습니다!

평화!

Answer 7

ㅎ. 이 질문을 연구하면서이 훌륭한 게시물을 발견했습니다. 또한 JQuery의 학습 사이트에서 속도를 최적화 할 수있는 특정 팁을 포함하는 최신 정보를 게시합니다.

주목할만한 점은 최신 DOM 사양에서는 성능에 대해 일반적으로 걱정할 필요가 없습니다. 병목을 만들었거나 발견 한 경우에만.이 페이지에 링크 된 다른 성능 테스트가 깨진 듯하고, 또한 (즉, 사용자 정의의 jQuery 방법)이 질문에 대해 질문하지 않은 무언가를 포함하기 때문에

Optimise Selectors

Answer 8

, 그때 결정

내 크롬에서 실행 https://jsperf.com/jquery-get-0-vs-get-element-by-id

, 그것은 보여줍니다 : 대신 사용자 지정 방법을, jQuery를에 정확한 상당 (DOM 요소를 반환)를 포함하는 질문에 대답하기 위해 새로운 성능 벤치 마크를 만들려면 곧은 jQuery

$('#foo').get(0) 

표준 자바 스크립트에서 해당 작업에 비해 92 % 느린

document.getElementById('foo') 

나는 또한 현재 가정 "훨씬 더 빠르게"하지만 여전히 89 여기 허용 대답으로 표시되고 있는지 시도 표준 자바 스크립트와 동등한 % 이상 느린 :

$(document.getElementById("foo")).get(0); 

자신을 위해 그것을 실행하고 당신은 내가 만든 performance benchmark와 함께, 귀하의 브라우저에서 무엇을 얻을 참조하시기 바랍니다. jQuery가없는 버전은 훨씬 빠르다.