누구나이 jQuery 선택기를 이길 수 있습니까?

Question

나는 몇 가지 테스트를 실행하여 Asp.Net에서 상위 컨트롤의 ID가 접두사로 붙은 컨트롤에 대한 효율적인 선택기를 찾을 수 있는지 확인했습니다.

내가 선택할 수 있기 때문에 이것을 찾고있었습니다. ASP는 외부 자바 스크립트 파일에서 제어합니다 (ClientID 사용에 지쳤습니다).

테스트하려면 "빠른"cssclass 및 개별 ID로 150 개의 텍스트 상자가있는 페이지를 설정하고 다음 코드를 실행하여 107 번째 텍스트 상자를 선택하십시오.

function testclientInput() { 

    var iterations = 100; 
    var totalTime = 0; 

    // Record the starting time, in UTC milliseconds. 
    var start = new Date().getTime(); 

    // Repeat the test the specified number of iterations. 
    for (i = 0; i < iterations; i++) { 
     // Execute the selector. The result does not need 
     // to be used or assigned to determine how long 
     // the selector itself takes to run. 

     // All tests done in ie6, ie7, ie8, ie9beta, firefox3.6, opera11 & chrome8 

     // slowest 
     // $('input.speedy[id$=_TextBox107]'); 

     // Quick but only useful if you know the index. 
     //$($('input.speedy')[106]); 

     //$('[id$=_TextBox107]:first'); 

     //$('input[id$=_TextBox107]'); 

     //$.clientID("TextBox107"); 

     //$('[id$=_TextBox107]'); 

     //$('input[id$=_TextBox107]:first'); 

     //$($('[id$=_TextBox107]')[0]); 

     // Fastest 
     //$($('input[id$=_TextBox107]')[0]); 
    } 

    // Record the ending time, in UTC milliseconds. 
    var end = new Date().getTime(); 

    // Determine how many milliseconds elapsed 
    totalTime = (end - start); 

    // Report the average time taken by one iteration. 
    alert(totalTime/iterations); 

}; 

이것은 내가 생각해 낸 최고입니다. $($('input[id$=_TextBox107]')[0]);. 결과는 놀랍습니다 .... :first 선택기를 사용하여 내 버전과 일치한다고 예상했지만 훨씬 느린 결과가보고되었습니다.

누구나 이것을 최적화하는 방법을 생각할 수 있습니까?

Answer 1

브라우저에 따라 다릅니다.

버전 :

$('input[id$=_TextBox107]') 

이 ... 유효한 querySelectorAll 선택, 그래서 그것을 구현하는 모든 브라우저가 매우 빠르게 될 것입니다.

:first 선택기를 사용하는 경우 유효한 CSS 선택기가 아닌 무언가를 사용하고 있으므로 Sizzle의 자바 스크립트 기반 선택기 엔진이 기본 설정되어 있으므로 속도가 훨씬 느려집니다.

성능이 중요한 경우 jQuery를 사용하지 마십시오. document.getElementsByTagName()을 사용하고 브라우저가 querySelectorAll을 지원하지 않는 경우 원하는 것을 필터링 할 수 있습니다.

var match; 
if(!document.querySelectorAll) { 
    var inputs = document.getElementsByTagName('input'); 

    for(var i = 0, len = inputs.length; i < len; i++) { 
     if(/_TextBox107/.test(inputs[i].id)) { 
      var match = $(inputs[i]); 
      break; 
     } 
    } 
} else { 
    match = $(document.querySelectorAll('input[id$=_TextBox107]')[0]); 
} 

Answer 2

내가 어떤 철저한 테스트를 didnt는하지만 어느 정도 빨리 당신의 "가장 빠른"선택기로했다 당신의 "느린"선택기를 사용하여 결과를 얻는되었다 ... 다른 옵션 중 일부는하지만 눈에 띄게 느린했다. 그러나, 나는 단지 ... 선택의

내 방법을 IE8을 사용하여 테스트를 읽기 전에이는 ... 당신의 "가장 빠른"그 다소 느리게 수행하지만 멀지 않은 최악의 선택에 의해했다

$("[id$='_TextBox107']") 

. 나는 더 많은 테스트를해야 할 수도 있고, 나의 선택을 재고 할 수도있다.