jQuery中的绑定事件非常昂贵,还是非常便宜？

Question

我刚刚编写了一个$().bind('event')函数,然后担心如果jQuery必须遍历DOM中的每个元素来绑定此事件,这种调用可能会非常昂贵.

或者,它可能与事件一样有效.我读过的jQuery文档并没有说清楚.任何意见？

Answer 1

有两件事可以使您的事件绑定代码变慢:选择器和绑定#.两者中最关键的是绑定#,但选择器可能会影响您的初始性能.

就选择器而言,只需确保不使用纯类名选择器.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在幕后做这样的事情(为每个匹配的元素绑定一个事件):

$('div.test').each(function() {
    this.addEventListener('click', function() {
        doSomething(this);
    }, false);
});

如果你有大量的元素,这可能会效率低下.通过事件委派,您可以将完成的绑定数量减少到一个.但是怎么样？事件对象具有一个target属性,可以让您知道事件所处的元素.所以你可以这样做:

$(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);
    }
});

幸运的是,您实际上不必使用jQuery对上面的代码进行编码.该直播功能,这是标榜事件绑定到尚不存在的元素的简单方法,实际上是能够通过使用事件代表团和检查的,如果目标选择匹配您指定它发生作用的时间来做到这一点.当然,当速度很重要时,这具有非常方便的副作用.

这个故事的主旨？如果您担心绑定的量你的脚本刚刚替换.bind用.live,并确保你有聪明的选择.

但请注意,并非所有事件都受到支持.live.如果你需要它不支持的东西,你可以查看livequery插件,它是关于类固醇的.