jquery - 委托是最快的绑定方式吗？

Question

有人可以解释为什么委托似乎比别名绑定或 on() 更快。

这是一个测试用例：

jsPerf

$('p').on('click',$.noop); //80% slower

$('p').click($.noop); //84% slower

$(document).delegate("p", "click",$.noop); //fastest

检查 jquery 源，似乎在绑定任何事件之前，jquery 检查代表。

这是一个正确的说法还是还有其他什么？

Answer 1

您犯的错误是认为只有一个 p 元素。

我添加了另一个测试，只有console.log($('p').length);，它显示测试中有 7 p 可见，其可见性显然不限于您在准备代码中构建的 HTML。

这意味着前两个函数必须再做 7 次绑定。

Answer 2

两者都delegate()简单bind()地调用on(). 这是 jQuery 1.9.0 源代码的摘录：

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

所以on()应该比其他两个函数稍微快一点，因为它少了一个函数调用。无论以何种方式绑定，处理程序的实际调用都应该是相同的。

但请确保您将苹果与苹果进行比较。如果你给or一个selector参数，调用处理程序会更慢，因为它必须检查目标是否满足选择器。delegatebind

您的基准测试结果的原因是因为

$("p").on('click',$.noop);

相当于：

$("p").each(function() {
    $(this).on('click', $.noop);
});

它必须找到所有匹配的元素并将处理程序绑定到它们。该delegate()调用只需要将处理程序绑定到一个元素（文档）；而不是在绑定时查找所有元素，而是在事件发生时执行以下操作：

if ($(event.target).is("p")) { ... }

它的使用on()相当于delegate()：

$(document).on('click', 'p', $.noop);

document当您从像p. 这就是为什么您应该尝试将使用的元素的范围限制为delegate包含您要委托给的所有动态元素的最小静态元素。

Answer 3

委托更快，因为您不必查找任何元素，如果您使用选择器而不是元素委托将是最慢的

<div>
<p>test</p>
</div>


$('p').on('click',$.noop);
$('p').click($.noop);
$('div').delegate("p", "click",$.noop);

http://jsperf.com/test-on-click-delegate/3