bind() 比 live() 和 delegate() 快吗？答案

【问题标题】：Is bind() faster than live() and delegate()?bind() 比 live() 和 delegate() 快吗？
【发布时间】：2011-08-11 17:37:08
【问题描述】：

我的团队正在使用 jQuery Mobile 构建一个移动网站，随着我们接近发布日期，性能变得越来越受关注。我所做的一项观察是，在我们的代码中我们有很多对live() 和delegate() 的调用；但事实上，据我所知，我们只是曾经使用这些方法将事件处理程序附加到已经存在的 DOM 节点（并且将始终存在，在我们的上下文中应用程序）。

鉴于 live() 和 delegate() 都旨在为可能在 DOM 中稍后出现的节点提供动态绑定，并且考虑到每个都涉及处理已冒泡的事件一直到document 根节点，我想知道我们是否可以通过将这些调用（在适当的情况下）改为bind() 来提高性能。

我知道我自己可能会以某种方式对此进行测试，但我没有大量使用 JavaScript 进行性能测试的经验，而且我认为我可能需要更长的时间才能弄清楚我会简单地问社区。有没有人测试过这个？有可测量的差异吗？或者将这些live() 和delegate() 调用切换到bind() 会浪费时间吗？

【问题讨论】：

如您所知，事件可以冒泡。 live() 方法不关心节点是后来出现在 DOM 中还是从一开始就在那里，它只是附加一个侦听器来执行“文档”全局变量并侦听某个事件是否来自适当的对象并触发如果有的话。至于你的问题：“我们应该忘记小的效率，比如说大约 97% 的时间：过早的优化是万恶之源”。
@Mironor：是的，过早优化。

标签： jquery performance events jquery-mobile

【解决方案1】：

这取决于您如何使用它，但在大多数情况下，delegate 提供了最佳性能（不一定仅在速度方面，而是在整体方面）：

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

【讨论】：

这解决了（在我看来）类似$('a').bind(...) 与$(document).delegate('a', ...) 的相当人为的情况；但我担心在包含 single DOM 节点的 jQuery 对象上调用 bind 的场景。也许我必须自己测试一下，嗯？
如果它是单个元素，delegate 和 bind 之间的性能将基本相同（bind 也可能稍快一些）。在任何情况下，您都应该确定您的代码。

【解决方案2】：

我没有测量任何东西，但是对于大量元素，live 可能比bind 更快，因为bind 需要影响每个元素。

如果你 bind 一个事件包含 200 个元素，jQuery 需要遍历所有这些元素并在每个元素上调用 addEventListener。
如果您将live 一个事件添加到 200 个元素，jQuery 只需将单个事件处理程序添加到 <body>。
但是，这意味着每个冒泡到正文的事件都必须针对您拥有的每个选择器进行测试 lived。

因此，最快的选择应该是delegate 包含尽可能少的元素（这样它就可以减少必须针对您的选择器进行测试的其他事件）

【讨论】：

这个推理对我来说是有道理的，但我仍然想知道在 single DOM 节点上使用 bind 与 live 或 delegate 的场景。跨度>
@Dan：如果你只有一个 DOM 节点，bind 可能会更快。
.bind() 的另一个缺点是，如果受影响的元素还没有事件处理程序，jQuery 会在每个元素上创建一个单独且唯一的函数到共享的实际处理程序。因此，如果您绑定到 200 个元素，则会创建和引用 201 个 Function 实例。

【解决方案3】：

我对这三者做了一个简单的基准测试。一般来说，Delegate 是最有效的。例外情况是被绑定的元素是静态且已知的。即使有多个静态元素，bind 的性能也始终优于 Delegate。 Bind 确实有更多的初始开销，但 Delegate 有更多的事件时间开销。

在.live() vs .bind()查看我的结果

【讨论】：

我很想看看你用来让这些方法相互竞争的代码。
这是一个带有警报的按钮，由单个静态测试的事件处理程序触发。然后我只是在页面上放置了多个按钮，并为每个按钮绑定了多个静态的侦听器。然后我让一个按钮创建下一个按钮并动态绑定以进行动态测试。一直在运行分析器来衡量性能和流程。

【解决方案4】：

bind 用于将事件直接绑定到元素上。因此，仅当元素存在时才会附加事件，因为 live 和 delegate 也用于动态元素。这取决于您的使用，但 live 和 delegate 提供比 bind 更好的性能

【讨论】：