jQuery 的 click() 函数怎么会比 addEventListener() 快这么多？

Question

我相信我们都见过site for vanilla-js（最快的 JavaScript 框架）;D 我只是好奇，在为点击添加事件处理程序方面，纯 JavaScript 究竟比 jQuery 快多少。所以我前往 jsPerf 进行测试，我是 quite surprised by the results。

jQuery 比普通 JavaScript 的性能高出 2500%。

我的测试代码：

//jQuery
$('#test').click(function(){
  console.log('hi');
});

//Plain JavaScript
document.getElementById('test').addEventListener('click', function(){
  console.log('hi');
});

我只是不明白这是怎么发生的，因为看起来 jQuery 最终将不得不使用与普通 JavaScript 完全相同的函数。 谁能解释一下为什么会发生这种情况？

Answer 1

正如您在 jQuery.event.add 的这个 sn-p 中看到的，它只创建一次 eventHandle。
查看更多：http://james.padolsey.com/jquery/#v=1.7.2&fn=jQuery.event.add

 // Init the element's event structure and main handler, if this is the first
events = elemData.events;
if (!events) {
    elemData.events = events = {};
}
eventHandle = elemData.handle;
if (!eventHandle) {
    elemData.handle = eventHandle = function (e) {
        // Discard the second event of a jQuery.event.trigger() and
        // when an event is called after a page has unloaded
        return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ? jQuery.event.dispatch.apply(eventHandle.elem, arguments) : undefined;
    };
    // Add elem as a property of the handle fn to prevent a memory leak with IE non-native events
    eventHandle.elem = elem;
}

这里我们有 addEventListener：

    // Init the event handler queue if we're the first
    handlers = events[type];
    if (!handlers) {
        handlers = events[type] = [];
        handlers.delegateCount = 0;

        // Only use addEventListener/attachEvent if the special events handler returns false
        if (!special.setup || special.setup.call(elem, data, namespaces, eventHandle) === false) {
            // Bind the global event handler to the element
            if (elem.addEventListener) {
                elem.addEventListener(type, eventHandle, false);

            } else if (elem.attachEvent) {
                elem.attachEvent("on" + type, eventHandle);
            }
        }
    }

Answer 2

我认为这是因为 jQuery 在内部实际上只需要调用addEventListener() 一次，用于它自己的内部处理程序。设置完成后，只需将您的回调添加到一个简单的列表中。因此，大多数对.click() 的调用只是做一些记账和.push()（或类似的东西）。