Question

我有一个大表的产品列表，它是动态的，并随着ajax而改变。该表中有大约100行。

我已经看到选择元素的上下文方法$('.className', '#parentElement');比平时$('.className');或$('#parentElement .className');执行得更好。（纠正我如果错了）

在某些情况下，我需要使用jQuery选择特定元素，并为每个新行动态添加唯一id="product-name-123456"和class="mainproductOffer"。

那么，这两种方法的表现更快？

$('tr[id^=product-name-]').click(function(){...});
$('tr.mainproductOffer').click(function(){...});

或

还有其他方法更快地做同样的事情吗？

Answer 1

在这种情况下使用类选择器，它比attribut选择器更快。您应该使用事件委派 - 例如：

$('table').on('click','.mainproductOffer',function() {});

减少事件处理程序的数量。如果类（mainproductOffer）仅用于TR标记，则也从选择器中删除Tag。

Answer 2

那么，这两种方法的表现更快？

$（ 'tr.mainproductOffer'）点击（函数（）{...}）;

还有其他方法更快地做同样的事情吗？

无与伦比的文章“jQuery Anti-Patterns for Performance”可以帮助您

Answer 3

使用on（）（事件委托），因为它是动态添加的。
类选择器比属性选择器
更快
$('tr').on( 'click', '.mainproductOffer', function(){...});

Answer 4

$('tr.mainproductOffer').click(function(){.....; OR
$('table').on( 'click', 'tr.mainproductOffer', function(){...;

更快

根据jquery documentation

jQuery可以在用于过滤委托事件时非常快速地处理表单标签＃id.class的简单选择器。所以，“＃myForm”，“a.external”和“button”都是快速选择器。使用更复杂的选择器（特别是分层选择器）的委托事件可能会慢几倍 - 尽管它们对于大多数应用程序来说仍然足够快。 通常可以通过将处理程序附加到文档中更合适的点来避免使用分层选择器。例如，代替 $（“body”）。on（“click”，“＃commentForm .addNew”，addComment）使用 $（“＃commentForm”）。on（“click “，”。addNew“，addComment）。

jQuery选择器速度执行

4 个答案: