logo标签列表

bind()比live()和delegate()更快吗？

jqueryperformanceeventsjquery-mobile
5
我的团队正在使用jQuery Mobile构建一个移动网站，随着我们接近发布日期，性能越来越成为一个问题。我注意到我们的代码中有很多对live()和delegate()的调用；但事实上，据我所知，我们只是在使用这些方法将事件处理程序附加到已经存在的DOM节点（并且在我们应用程序的上下文中始终存在）。
考虑到live()和delegate()都旨在为可能在DOM中稍后出现的节点提供动态绑定，并且考虑到每个方法都涉及处理一直冒泡到document根节点的事件，我想知道如果在适当的情况下将这些调用更改为bind()，是否可以看到性能改进。
我知道我可能可以自己以某种方式测试这个问题，但我没有太多使用JavaScript进行性能测试的经验，我认为这可能需要比向社区询问更长的时间。有人测试过吗？是否有可衡量的差异？或者将这些live()和delegate()调用切换到bind()是否浪费时间？
正如您所知，事件可以冒泡。live()方法不关心节点是后来出现在DOM中还是一开始就在那里，它只是将侦听器附加到“document”全局变量上，并侦听是否有事件来自适当的对象，如果有，则触发该函数。至于您的问题：“我们应该忘记小效率，大约97％的时间：过早优化是万恶之源”。 - Mironor
1
@Mironor：是的，过早优化。 - Dan Tao
4个回答
4
这里涉及到一个我认为相当牵强的情况，即 $('a').bind(...) 与 $(document).delegate('a', ...) 的比较；但我关心的是在一个包含单个DOM节点的jQuery对象上调用bind的情况。也许我得自己测试一下，是吧？ - Dan Tao
如果只有一个元素，delegate 和 bind 的性能基本相同（bind 可能稍微快一些）。无论如何，您应该对代码进行分析以确保。 - Mrchief
3
我没有进行任何测量，但对于较大数量的元素，live 可能比 bind 更快，因为 bind 需要影响每个元素。
如果您将事件绑定到 200 个元素，则 jQuery 需要遍历所有这些元素，并在每个元素上调用 addEventListener。 如果您将事件绑定到 200 个元素，则 jQuery 只需向 <body> 添加一个单独的事件处理程序。 然而，这意味着每个冒泡到 body 的事件都必须与您 live 的每个选择器进行测试。
因此，最快的选项应该是委托给包含尽可能少内容的元素（以便它获得更少的其他事件，必须与您的选择器进行测试）。
这种推理对我来说有道理，但我仍然想知道在使用bind与live或delegate处理单个DOM节点的情况下的场景。 - Dan Tao
@Dan：如果您只有一个DOM节点，使用“bind”可能会更快。 - SLaks
1
.bind() 的另一个缺点是，如果被影响的元素尚未具有事件处理程序，则 jQuery 会为每个元素创建一个单独且唯一的函数，除了实际共享的处理程序之外。因此，如果您绑定到 200 个元素，则会创建和引用 201 个函数实例。 - user113716
2

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

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

我非常好奇您用来比较这些方法的代码。 - Dan Tao
这是一个单一的按钮，由单一静态测试的事件处理程序触发警报。然后我只需在页面上放置多个按钮，并将每个按钮与多个静态监听器绑定。然后，我让一个按钮创建下一个按钮并动态地绑定到动态测试。整个过程中，我运行了性能和进程测量工具。 - Watermark Studios
0

bind 用于直接在元素上绑定事件。因此，只有当元素存在时，事件才会附加，而 live 和 delegate 也用于动态元素。这取决于您的使用情况，但是 live 和 delegate 提供的性能要优于 bind

。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接