性能问题:通用选择器与个人绑定

时间:2012-08-24 09:25:59

标签: javascript jquery performance

所以在我的页面中我会插入一系列元素,让我们用类名"元素"但其中一些将被禁用,这将获得额外的课程#34;禁用"。现在我想将click事件绑定到所有非禁用元素,我只是想知道性能是否明智,只需编写

$(".element:not(.disabled)") .live("click",function() { ...

或者我应该在插入时将click事件绑定到每个单独的元素吗?

P.S。我知道.on已经取代了.live,但是现在我正在使用版本1.6.2,所以无法改变它

3 个答案:

答案 0 :(得分:3)

一般经验法则:在将某些内容识别为性能问题之前,请不要进行优化。

如果页面上有一万个元素,您可能会注意到:not()选择器有点慢,但如果页面上有一万个元素,那么一些事情是认真的你的设计有问题。

我怀疑你在页面上有一些(> 1和< 100)元素,在这种情况下,选择器会表现得很好!

答案 1 :(得分:2)

首先,你不应再使用.live(),因为它已被弃用于所有版本的jQuery。我建议这样做:

$(document).on('click', '.element:not(.disabled)', function() {...});

这应该没有什么性能问题因为与选择器的比较只发生在点击发生时和比较完成时,这只是检查目标的类名的一个相当简单的比较。

此外,由于点击是在用户时间内发生的用户操作,并且选择器比较根本不复杂,所以任何延迟都不太可能是显而易见的(我们这里最多谈论的是毫秒)。 / p>

答案 2 :(得分:1)

如果您没有发现性能问题,则无需修复它!

我个人会附上点击事件,然后对它们进行检查。像这样:

$(".element").on("click",function() { 
  var $this = $(this);
  if ($this.hasClass("disabled")) return;

  //Continue here
});

此外,您应该使用.on而不是.live,因为现在已弃用。 Docs