jQuery中的绑定事件是非常昂贵的还是非常便宜的？ [英] Is binding events in jQuery very expensive, or very inexpensive?
问题描述
或者也许，这与事件可能一样高效。我已经阅读的jQuery文档并不清楚。任何意见？
有两件事情可以使您的事件绑定代码变慢：选择器和绑定的数量。最重要的两个是绑定的数量，但是选择器可能会影响你的初始性能。
就选择器而言，只要确保不要使用纯类名选择器，如 .myclass 。如果您知道 myclass 的类始终位于< div> 元素中，请使您的选择器为 div.myclass ，因为它将帮助jQuery更快地找到匹配的元素。另外，不要采取jQuery的优势让你给它巨大的选择器字符串。它可以使用字符串选择器做的一切，它也可以通过函数执行，这是有意的，因为它（稍微，毫无疑问地）更快地这样做，因为jQuery不必坐在解析你的字符串来弄清楚什么你要。因此，您可以执行 $（'＃myform input：eq（2）'）; ，而不是执行 $（'input'，'＃myform' ）.EQ（2）; 。通过指定一个上下文，我们也不会让jQuery看起来不需要任何地方，这要快得多。 有关此处的更多信息 。
至于绑定的数量：如果你有相对中等大小的元素，那么你应该是好的 - 任何高达200，300潜在的元素匹配将在现代浏览器中表现良好。如果你有更多的话，你可能想要看事件委托。
什么是事件委托？基本上，当你运行这样的代码：
$（'div.test'）。click（function（）{
doSomething（$（this））;
}）;
jQuery正在幕后进行这样的操作（绑定每个匹配元素的事件）每个（function（）{
this.addEventListener（'click'），函数（
（）{
doSomething（this）;
}，false）;
}）;
如果您有大量的元素，这可能会降低效率。通过事件委托，您可以将绑定的数量减少到一个。但是怎么样事件对象具有一个目标属性，可以让您知道事件执行的元素。所以你可以这样做：
$（document）.click（function（e）{
var $ target = $（e.target）;
if（$ target.is（'div.test'））{//点击的元素是一个DIV
//，一类test b $ b doSomething（$ target）;
}
}）;幸运的是，你实际上并不需要用jQuery编写上面的代码。 live 功能，它被广告为将事件绑定到元素的简单方法实际上，如果目标与您指定的选择符相匹配，则可以通过使用事件委派和检查来执行此操作。当速度很重要时，这个副作用当然是非常方便的。
故事的道德？如果您担心您的脚本只能用 .live 替换 .bind 的绑定数量，并确保您有智能选择器。
但是请注意，并不是所有的事件都由 .live 支持。如果您需要不支持的内容，可以查看 livequery 插件，该插件是现场对类固醇。
I just wrote a $().bind('event') function and then got concerned that this kind of a call might be very expensive if jQuery has to run through each element in the DOM to bind this event.
Or maybe, it's just about as efficient as an event could be. The jQuery docs I've read aren't making this clear. Any opinions?
解决方案 There are two things that can make your event binding code slow: the selector and the # of bindings. The most critical of the two is the # of bindings, but the selector could impact your initial performance.
As far as selectors go, just make sure you don't use pure class name selectors like .myclass. If you know that the class of myclass will always be in a <div> element, make your selector be div.myclass as it will help jQuery find the matching elements faster. Also, don't take advantange of jQuery letting you give it huge selector strings. Everything it can do with string selectors it can also do through functions, and this is intentional, as it is (marginally, admittedly) faster to do it this way as jQuery doesn't have to sit around to parse your string to figure out what you want. So instead of doing $('#myform input:eq(2)'); you might do $('input','#myform').eq(2);. By specifying a context, we are also not making jQuery look anywhere it doesn't have to, which is much faster. More on this here.
As far as the amount of bindings: if you have a relatively medium-sized amount of elements then you should be fine - anything up to 200, 300 potential element matches will perform fine in modern browsers. If you have more than this you might want to instead look into Event Delegation.
What is Event Delegation? Essentially, when you run code like this:
$('div.test').click(function() {
doSomething($(this));
});
jQuery is doing something like this behind the scenes (binding an event for each matched element):
$('div.test').each(function() {
this.addEventListener('click', function() {
doSomething(this);
}, false);
});
This can get inefficient if you have a large amount of elements. With event delegation, you can cut down the amount of bindings done down to one. But how? The event object has a target property that lets you know what element the event acted on. So you could then do something like this:
$(document).click(function(e) {
var $target = $(e.target);
if($target.is('div.test')) { // the element clicked on is a DIV
// with a class of test
doSomething($target);
}
});
Thankfully you don't actually have to code the above with jQuery. The live function, which is advertised as an easy way to bind events to elements that do not yet exist, is actually able to do this by using event delegation and checking at the time an action occurs if the target matches the selector you specify to it. This has the side effect, of course, of being very handy when speed is important.
The moral of the story? If you are concerned about the amount of bindings your script has just replace .bind with .live and make sure you have smart selectors.
Do note, however, that not all events are supported by .live. If you need something not supported by it, you can check out the livequery plugin, which is live on steroids.
这篇关于jQuery中的绑定事件是非常昂贵的还是非常便宜的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
