Как оптимизировать обработчики событий jQuery для скорости

Question

Я пытаюсь ускорить выполнение javascript в нашем приложении.

Похоже, Я 900+ слушателей событий связанных -

var listenerCount = 0;  
var ael = Node.prototype.addEventListener; 
Node.prototype.addEventListener = function() { 
    listenerCount++; 
    ael.apply(this, arguments); 
} 

И я понимаю, что это будет осуществление производительности. Можно ли ускорить процесс, регулируя способ регистрации слушателей? Например, если я попытаюсь зарегистрировать on событий на одном и том же элементе (с разными селекторами), это будет более эффективным.

Например, изменение

$('#sidebar').find('select').on('click', 'option', handler1); 
$('#sidebar').find('.className').on('click', 'a', handler2); 

для

$('#sidebar').on('click', 'select option', handler1); 
$('#sidebar').on('click', '.className a', handler2); 

Вообще меня интересует время, необходимое для регистрации, а все, чем время, на самом деле запустить обработчик (и я что разные селекторы выполняют по-разному). Я бы, вероятно, заменил дополнительные 10-50 мс, когда событие действительно уволено за 1-5 мс при регистрации события - я хочу, чтобы приложение загружалось быстро!

Я думал писать что-то, что будет делать согласование выбора таким образом, чтобы уменьшить количество событий фактически зарегистрированных, но я не могу найти кого-либо еще делать что-нибудь подобное (что заставляет меня думать, что, вероятно, немой) -

var sideBarDomEvents = (function(){ 
    var clickEvents = [], 
    my = { 
     init: function() { 
     $sidebar = $('#sidebar'); 
     $sidebar.on('click', function(e){ 
      for (var i=0; i < clickEvents.length; i++) { 
      if (clickEvents[i]['target'] == $(e.target) { 
       clickEvents[i]['handler'](e); 
      } 
      } 
     }); 
     }, 
     registerClickEvent: function($target, handler){ 
     // This only works if the target is the inner most element - bubbling isn't supported! 
     clickEvents.push({'target':$target, 'handler': handler}); 
     } 
    } 
    return my; 
})(); 

Я действительно не уверен, куда идти - я даже не знаю, где измерить этот материал (я, конечно, ничего не заметил в профиле или временной шкале Chrome). Любое объяснение эффектов производительности jquery-событий было бы замечательным.

Answer 1

Прикрепление слушателей к одному и тому же объекту делает фактическое подключение слушателей меньше времени, но процесс ловли и обработки событий будет медленнее.

Прикрепление слушателей ближе к цели занимает больше времени, но обработчики срабатывают быстрее, когда происходит событие.

По этому вопросу ответа - Should all jquery events be bound to $(document)??