Насколько сильно снижается производительность jQuery при использовании большого количества селекторов?

Question

Я хочу применить событие click() ко всем ссылкам на странице, когда href этой ссылки указывает на файл с определенным расширением.Список применимых расширений колеблется в районе 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 МГц).

Тем не менее, вам следует эталон и найди самый быстрый путь для вашего приложения. Найдите старый паршивый компьютер с IE6 или приобретите виртуальную машину с IE6 и проверьте на ней время.Настройка селекторов (и определение того, какие из них медленные и как их избежать) — это моя первая остановка в оптимизации JavaScript.

Answer 3

Я бы рассмотрел возможность использования функции фильтра, а не набора селекторов:

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