【发布时间】：2014-12-08 17:43:43
【问题描述】：
我正在尝试加快我们应用中的 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 事件的性能影响的任何解释都会很棒。
【问题讨论】：
-
事件委托与速度无关。你的问题太长太模糊了。只有当你有一个“糟糕”的书面选择器在很多元素上运行时，速度才会被感知到。这很慢，但人类可能不会看到。电脑速度慢。
-
除了增加代码的复杂性之外，您将无法使用 jquery 做任何更好的事情。
-
@vsync 问题并不模糊或冗长。事实上，这个问题只有一句话长（并用问号标识）——“是否可以通过调整我注册事件监听器的方式来加快速度？”。其余的是背景信息。
-
@AidanEwen - 你是如何得出结论的，事情是“慢”的，你想加快它们的速度吗？什么对你来说很慢？太多的事件消耗更多的内存，但是900在内存消耗方面并不是一个很高的数字，但是，应该以合理的方式进行事件委托。
-
@vsync 我通过测量事情发生的时间得出结论，事情很慢。我想加快它们的速度，因为这将改善用户体验，并最终提高盈利能力。我们的 javascript 应用程序很慢。
标签： javascript jquery performance events