jQuery的新on（）方法与性能中的live（）方法相比如何？ [英] How does jQuery's new on() method compare to the live() method in performance?

问题描述

jQuery有一个叫做 on（）的新方法，建议替换 delegate（）， live（）和 .bind（）。

jQuery has a new method called on() that is recommended to replace delegate(), live(), and .bind().

，使用两种方法：

$('#some-button').on('click', function() {
    //do something when #some-button is clicked
});
$('#some-button').live('click', function() {
    //do something when #some-button is clicked
});

哪一个表现更好？ （我知道这两个事件上下文都在文档级别。）

Which one performs better? (I do know that both of these event contexts are at the document level.)

推荐答案

据我了解 .live（）和 .on（），你包含的两个例子并不是一回事。

As I understand .live() and .on(), the two examples you have included do not so the same thing.

您的第一个：

$('#some-button').on('click', function() {
    //do something when #some-button is clicked
});

没有一个 live 行为。它找到＃some-button 对象并直接安装一个事件处理程序。这是非常有效的，但没有 .live（）行为。如果目前不存在＃some-button 对象，则不会安装任何事件处理程序。它基本上是一样的：

does not have a live behavior. It finds the #some-button object and installs an event handler on it directly. This is very efficient, but does not have .live() behavior. If the #some-button object does not exist at this time, no event handler will be installed ever. It is basically the same as this:

$('#some-button').click(function() {
    //do something when #some-button is clicked
});

您的第二个：

$('#some-button').live('click', function() {
    //do something when #some-button is clicked
});

有 live 行为。它会在文档上安装一个事件处理程序，并等待针对与＃some-button匹配的对象的点击以触发文档对象。你的第二个在理论上等同于：

has live behavior. It installs an event handler on the document and waits for clicks targeted to an object that matches "#some-button" to bubble up to the document object. Your second one is theoretically equivalent to this:

$(document).on('click', '#some-button', function() {
    //do something when #some-button is clicked
});

我说理论上是等价的，因为它应该安装相同的事件处理程序，但是我不知道用于处理这两个的jQuery代码是否相同。

I say theoretically equivalent because it should install the same event handlers, but I don't know if the jQuery code for processing the two is identical or not.

.live（）的原因之一是不赞成的是，由于您在文档对象上获得了大量事件处理程序，因此拥有大量 .live（）处理程序可能是一件坏事。然后，必须针对大量的选择器检查与文档对象相关的每个点击或甚至mousemove，这些选择器真的可以减缓事情。

One of the reasons that .live() has been deprecated is that it can be a bad thing to have a lot of .live() handlers because you get a lot of event handlers on the document object. Then, every click or even mousemove that bubbles up to the document object has to be checked against a LOT of selectors which can really slow things down.

.live（）是在打电话时评估选择器＃some-button，但实际上并没有使用该结果，因此它是浪费的。当您制作时， .on（）版本不会评估作为参数传递给 .on（）的选择器第一个电话是因为当时不需要它 - 只有当实际点击进入时才需要与选择器进行比较。

Another issue with .live() is that it evaluates the selector "#some-button" at the time you make the call, but doesn't actually use that result so it's wasteful. The .on() version doesn't evaluate the selector passed as an argument to .on() when you make the first call because it isn't needed at that time - it's only need later when an actual click comes in that has to be compared to the selector.

随着到来的 .on（）（或您以前可以使用 .delegate（）），您可以将您的而不是将它们全部放在文档对象上，而是将它们放在一个不会出现的父对象上，并且更接近实际对象的位置，比如：

With the advent of .on() (or something you could previously do with .delegate()), you can target your "live" event handlers more efficiently by not putting them all on the document object, but rather putting them on a parent object that does not come and go and is a lot closer to where the real objects are such as this:

$('#some-button-parent').on('click', '#some-button', function() {
    //do something when #some-button is clicked ///////
});

将事件处理程序扩展到不同的对象，并使它们更接近实际的对象这意味着你不会最终得到这个巨大的事件处理程序列表，必须在每个mousemove或click事件上检查选择器。这就是为什么 .live（）已被替换和废弃。使用 .delegate（）或 .on（）更好地指定一个不是作为文档对象很远。

This spreads the event handlers out to different objects and gets them closer to the actual objects for which they are meant meaning you don't end up with this giant list of event handlers that have to be checked against selectors on every mousemove or click event. That's why .live() has been replaced and deprecated. It's much better to use .delegate() or .on() and specify a parent object that isn't as far away as the document object.

新的 .on（）语法的优点是可以做现在只需要改变你如何传递参数，就可以使用live和static事件处理程序。 jQuery对象是将安装事件处理程序的位置，第二个参数中的可选选择器是事件目标必须匹配的选择器。如果您传递该选择器，则所有触发jQuery对象中指定的对象的事件将针对该选择器进行目标检查。如果没有选择器，那么只有目标对象与jQuery对象中指定的对象相同。

The advantage of the new .on() syntax is that you can do both "live" and "static" event handlers with the same method now, just by varying how you pass the arguments. The jQuery object is where the event handler will be installed and the optional selector in the second argument is a selector that the event target must match. If you pass that selector, then all events hitting the object(s) specified in the jQuery object will have their target checked against that selector. If there is no selector, then only objects who's target is the same as the object specified in the jQuery object will be matched.

所以这就是关于如何他们工作，为什么一个配置应该比另一个更好。如果您想要测试现实世界的性能，那么您必须在事件处理程序传播和分发上进行一些性能测试，这可能在您遇到很多活事件处理程序的情况下。该测试可能不容易，因为在事件处理程序的开始/结束处可能难以获取时间信息。你不能轻易地使用像jsperf这样的工具。

So, this is all the theory about how they work and why one configuration is supposed to be better than another. If you want to test real world performance, you'd have to devise some sort of performance test on event handler propagation and distribution probably in a scenario where you had a lot of "live" event handlers. That test is probably not easy to do because it may be hard to get timing info on the start/end of an event handler. You can't easily use a tool like jsperf for something like this.

这篇关于jQuery的新on（）方法与性能中的live（）方法相比如何？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！