哪个 jQuery .on() 更快：直接还是委托？答案

【问题标题】：Which jQuery .on() is faster: direct or delegated?哪个 jQuery .on() 更快：直接还是委托？
【发布时间】：2017-01-07 19:07:16
【问题描述】：

假设我需要在<div class="cool-div"> 上设置'click' 事件监听器。假设它有一个祖先。

<div class="cool-ancestor">
    ...
    <div class="cool-div">
    ...
</div>

我应该使用以下哪个代码来获得更好的性能，为什么？

a) $(document).on('click', '.cool-div', function(){...})

b) $('.cool-ancestor').on('click', '.cool-div', function(){...})

c) $('.cool-div').on('click', function(){...})

情况1

页面上只有一个<div class="cool-div">。

情况2

页面上有很多<div class="cool-div">。

【问题讨论】：

绝对直接。
click 是 .on( "click", handler ) 的快捷方式，直接会更快。了解更多api.jquery.com/click
因为这 1-2 毫秒的差异会改变任何事情
我不知道，我得测试一下。但我通常更喜欢b)，因为我不必等待DOMContentLoaded 让我的脚本工作。所以即使页面没有完成加载，我的按钮也已经可以工作了。

标签： javascript jquery performance event-handling jquery-events

【解决方案1】：

删除 JQUERY

如果您对性能感兴趣，那么首先要删除 jquery。尽情享受Vanilla-JS performance。 JQuery 在选择元素时速度较慢，这是一回事，但讨厌 JQuery 的另一个原因是它自动将事件侦听器附加到某些元素。
例如，如果您使用 jquery 1.11，则所有 a 标记都将设置一个 blur 和一个 focus 事件侦听器。

DOM 是如何工作的？

如果您想在导航器中构建功能强大的应用程序，您需要了解导航器如何处理您的代码。
所以，here is a wonderful article about DOM events
reflow and repaints
还有a good ressource about what will call a reflow

一些准则

如果你没有时间阅读上面的文章，可以考虑以下准则：

保持 HTML 简洁（嵌套元素越少，页面中的事件运行速度就越快）
不要附加无用的事件监听器，它只会无缘无故地消耗资源（所以 - 再次 - 删除 jQuery）。
尽量不要触发reflow，因为所有元素的位置和尺寸都会被重新计算。例如，CSS 位置更改或input.focus() 导致重排。

希望能帮助到你，最好的问候，

【讨论】：

【解决方案2】：

如果你的代码没有生成任何子 div 的

     <div class="cool-div">

动态然后直接是完美的并且工作顺利。否则最好使用委托，因为有时直接可能不适用于动态生成的元素。

【讨论】：