Question

jQuery中的选择器或函数是否更快？例如：

$('#something div.else'); // find multiple divs with class .else

或

$('#something').children('div.else');

我正在尽力优化一个包含数百个返回元素的页面，这些元素似乎挂在办公室里某个蹩脚的计算机上（必须使用Internet Explorer :: shudder ::）。

Answer 1

在这种情况下，第二个更快，但，它们不等同。第一个找到任何后代div.else，另一个找到直接子项div.else。

这取决于你的DOM哪个更快，相当于第二个就是：

$('#something > div.else');

这使用child selector。他们应该非常，非常关闭，无论如何，我怀疑从ID下降的选择器是你的问题区域，我想你会发现绝大多数你在JS的时间花在其他地方。

为了诊断速度问题，获取一个分析器，对于IE，特别是有一个名为dynaTrace AJAX Edition的奇妙免费版本。抓住它，follow the short tutorials在他们的网站上......你会发现IE中你的疼痛区域非常快。

Answer 2

虽然我没有检查jQuery代码，但我认为你的两个例子之间的区别应该是可以忽略的 - 尽管第一个应该运行得快一点。

旧IE版本的问题在于它们不支持基于类名获取项目的本机方式。在这种情况下，jQuery必须对包含的每个元素的每个class属性执行一个regulra表达式。

如果在您的情况下可行，则可以在选择不常见的标记名时获得相当多的性能：

$("#container blockquote.else")

理想情况下，请保留班级名称。

编辑：刚刚看到尼克的答案他是对的，第二个只需要检查直接的孩子。等效的第一个是：

$("#container > div.else")

Answer 3

在您的具体示例中，您的第一个

示例

$('#something div.else');

通过Sizzle（在jQuery lib中提供）优化到

$('#something').find('div.else');

没有优化，会更慢，因为选择器引擎sizzle的工作方式是从正确到左。因此，它会将所有divs与类else匹配，然后检查哪些#something为父级。

修改

Sizzle optimazation速度较慢无论如何，因为它需要一段时间，直到那个任务完成了一些函数在途中被调用

通常，使用jQuery functions要快得多。例如，jQuerys .eq()函数将使用array slice来减少一组jQuery对象，而:eq()选择器将调用sizzle。

如果在您的示例中，div.else元素是#something的直接子元素，.children()将超过.find()，因为.find()也会查找所有< / strong>后代（和他们的孩子）。

Answer 4

如果我理解正确，您需要以最快的方式在IE6中获取#something div.else。由于jQuery使用Sizzle，它首先找到所有div的方式，然后通过else类过滤，并且具有#something id的祖先。

如果它包含很少的孩子，你的第二个例子会更快，如果它包含很多孩子则会慢一些。

您可以尝试的建议是使用其他代码类型而不是div，一个未在您的网页中使用的代码，例如blockquote。只需使用css重置它的样式，使其看起来像普通div，然后将选择器更改为#something blockquote.else，这应该更快。

优化jQuery选择器 - 哪个更快？

4 个答案: