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().

例如，同时使用这两种方法:

For example, using both methods:

$('#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() 处理程序可能是一件坏事，因为您会得到文档对象上有很多事件处理程序.然后，每次点击甚至鼠标移动到文档对象时都必须对照大量选择器进行检查，这确实会减慢速度.

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 ///////
});

这会将事件处理程序分散到不同的对象，并使它们更接近它们所指的实际对象，这意味着您最终不会得到这个巨大的事件处理程序列表，每次鼠标移动或点击事件.这就是 .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() 语法的优点是，您现在可以使用相同的方法同时处理实时"和静态"事件处理程序，只需改变传递参数的方式即可.jQuery 对象是安装事件处理程序的位置，第二个参数中的可选选择器是事件目标必须匹配的选择器.如果您传递该选择器，则所有命中 jQuery 对象中指定的对象的事件都将根据该选择器检查其目标.如果没有选择器，则只匹配target与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屋！