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-50ms，以便在注册事件时减少1-5ms - 我希望应用程序加载速度快！

我正在考虑编写一些可以进行选择器匹配的内容，以减少实际注册的事件数量，但是我无法找到其他人做类似的事情（这让我觉得它很可能笨） -

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)?？

如何优化jQuery事件处理程序以提高速度

1 个答案: