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

Question

Я хочу применить событие 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 МГц)

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

Answer 3

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

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