많은 선택기를 사용하면 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는 모든 링크를 한 번만 검색하면 되며 함수 내에서 스위치 케이스를 사용하는 것이 너무 빨라서 성능 문제로 고민할 필요가 없습니다.

Answer 2

나는 당신에게 힌트를 줄 것입니다 - 거의 확실하게. 나는 이런 일을했는데 매우 고통 스러웠다. 각 선택기의 결과를 배열에 저장 한 다음 $ (Array)를 수행하는 다른 접근 방식을 시도했습니다. Click ()는 훨씬 빠릅니다 (특히 IE6/P3 900 MHz).

즉, 당신은해야합니다 기준 그리고 가장 빠른 방법을 찾으십시오 귀하의 신청서. IE6이있는 오래된 엉터리 컴퓨터를 찾거나 IE6과 함께 VM을 받고 타이밍을 테스트하십시오. 셀렉터 튜닝 (및 느린 느린 방법과 전화를 피할 수있는 방법을 보는 것은 JavaScript 최적화의 첫 번째 정지입니다.

Answer 3

선택기 세트가 아닌 필터 기능을 사용하는 것을 고려합니다.

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