많은 선택기를 사용할 때 jQuery 성능이 얼마나 저하됩니까?

Question

해당 링크의 href가 특정 확장명을 가진 파일을 가리키는 경우 페이지의 모든 링크에 click() 이벤트를 적용하고 싶습니다. 적용 가능한 확장 기능의 목록은 약 30 개가 넘고 미래에는 약간 증가 할 수 있습니다 (단, 100 개를 넘지는 않습니다). 이 미친

$("a[href$=avi], 
    a[href$=ppt], 
    a[href$=rtf], 

// ...snip a bunch more of these.... 

    a[href$=pdf], 
    a[href$=xml]").click(function() { 
     // Do something 
}); 

:

내 첫 성향과 같이 바인딩 이벤트를 구성하는 것입니다?

Answer 1

나는 모든 링크를 선택한 다음과 같은 예를 들어, 클릭 기능 내부를 필터링 할 것 :

$('a').click(function() { 
    var ext = /[^.]+$/.exec($(this).attr('href')); 
    switch(ext) { 
     case 'avi': 
     case 'ppt': 
     ... 
     case 'xml': 
      // Do something 
      break; 
    } 
}); 

는 이송을 많이 저장하고 훨씬 예뻐이다.

당신의 접근 방식에 나쁜 점은 jQuery가 각 선택기를 독립적으로 처리 할 것이므로 첫 번째 선택기 검색이 끝나면 다른 항목을 완전히 잊어 버리고 다음 선택기에 대해 전체 문서를 다시 검색한다는 것입니다. 이 방법을 사용하면 jQuery는 모든 링크를 한 번만 검색하면되고, 함수 내부의 switch-case를 사용하면 성능상의 문제로 귀찮게하지 않아도된다.

Answer 2

나는 거의 확실하게 힌트를 줄 것이다. 나는 이것과 비슷한 것을했고 매우 고통 스러웠습니다. 내가 배열의 각 선택의 결과를 저장하고 훨씬 더 빨랐다() $ (배열) .click을하고, 또 다른 접근 방식을 시도 (IE6/P3 900 mHz에서 특히에)

는 말했다, 당신이해야 벤치 마크 및 귀하의 응용 프로그램에 대한 가장 빠른 방법을 찾으십시오 . IE6가 포함 된 오래된 컴퓨터를 찾거나 IE6이 설치된 VM을 구해서 그 시간을 테스트하십시오. 선택기 튜닝 (및 느린보고 어떻게 그들을 호출하지 않도록 할 수) 자바 스크립트 최적화에 대한 나의 첫 번째 중지됩니다.

Answer 3

나는 필터 함수보다는 선택기 세트를 사용하여 고려할 것 :

$('a').filter(function() { 
      return $(this).attr('href').match(/(avi|ppt|...|xml)$/) != null; 
     }) 
     .click(function() { 
      // do something 
     });