Question

我正在努力加快我的活动注册速度。任何人都可以告诉我哪个会占用最少的处理时间 -

$('#myElement').find('select.foo').on('click', 'option', handler1);
$('#myElement').find('select.bar').on('click', 'option', handler2);

或

$('#myElement').on('click', 'select.foo option', handler1);
$('#myElement').on('click', '.select.bar option', handler2);

Answer 1

我同意评论者说“运行一些jsPerf测试”。优化的第一条规则是“不要过早优化”。你为什么要优化？你有性能问题吗？如果您是，您确定已将其与此代码隔离开来吗？这就是分析会告诉你的。如果是此代码，那么您可以找出哪种方法可以提供更高的性能。

我怀疑第一个版本会有更高的性能，因为它会将事件处理程序附加到最接近事件生成的元素。第二个版本将事件处理程序附加到DOM树中较高的元素，因此事件必须在捕获之前传播，然后事件处理程序必须运行过滤器以查看事件是否来自匹配元素。

另一种看待这种情况的方法是第一个版本在页面加载时识别需要侦听器的元素（然后执行工作），第二个版本识别将在事件发生时响应事件的元素（传播工作）出去并可能创造更多的工作 - 可能是有充分理由的;见下文）。

但要非常小心：通常，动态插入元素时会使用第二种方法。这是解决事件处理程序未附加到动态添加元素的问题的最简单方法。因此，如果您确实拥有动态添加的元素，那么第二个版本可能是您的最佳选择，尽管有性能考虑因素。

Answer 2

将侦听器附加到同一对象使得实际附加侦听器所花费的时间更少，但捕获和处理事件的过程将会更慢。

将侦听器附加到目标附近需要更多时间，但处理程序将在事件发生时更快地启动。