为什么在jQuery中事件绑定比本地JavaScript慢得多？

Question

我做了一个小的JSPerf来测试JavaScript中事件绑定的性能。我知道原生JavaScript会是最快的，但真正让我惊讶的是jQuery比它慢得多。而且在JavaScript对象和jQuery对象上运行jQuery绑定之间存在很大的差异。

我使用的代码如下。 此代码的JSPerf在此处。

var div = document.createElement('DIV');
var handler = function(){};
var jq_div = $('div');

// #1 - native javascript test code
div.addEventListener('click', handler);

// #2 - jquery event binding on javascript object
$(div).on('click', handler);

// #3 - jquery event binding on jquery object
jq_div.on('click', handler);

能有人为我解释一下这些差异，特别是第二种和第三种情况之间的差异。我没有预料到会有很大的区别。还有，是否有任何方法可以提高jQuery事件绑定的性能？

非常感谢您的努力。

- Frodik

---

请注意，jQuery 示例为页面上找到的每个 div 添加了事件处理程序，而原生代码只添加了一个（用于新创建的那个）。 - Teemu

抱歉，我已经编辑了JSPerf示例：http://jsperf.com/rychlost-events 我对JSPerf相对较新，我没有意识到这一点。谢谢，现在我看到其他数字，更符合我的预期。 - Frodik

第2项不仅是测量附加事件处理程序的时间，还包括从div创建jQuery对象的时间。对于#2的公平测试应该是在测试循环之外使用var $div = $(div);，然后在循环内部只使用$div.on('click',handler);。 - Tian van Heerden

Answer 1

有人能解释一下这些差异吗？

jQuery需要执行本地绑定所需的所有操作，以及jQuery用于其内部事件系统的大量开销。

主要是在第2和第3种情况之间

您的var jq_div = $('div');是错误的。它会选择页面中的所有div元素并将事件绑定到所有元素上；您应该使用var jq_div = $(div);或var jq_div = $('<div>');。

有什么方法可以改善jQuery事件绑定性能吗？

没有。也完全没有必要。与“触发”相比，“绑定”（binding）事件几乎从不在应用程序中发生——这是非常罕见的任务。正如您的jsperf测试证实的那样，它仍然每秒发生数千次，已经足够快了。如果您确实发现自己需要同时将事件绑定到很多元素，请使用事件委托。

- Bergi