在jQuery中查找元素的最有效方法

Question

如果我有一个我只应用于表单元素的CSS类,例如:

<form class="myForm">

这两个jQuery选择器中哪一个最有效,为什么？

a) $('form.myForm')

b) $('.myForm')

Answer 1

编辑:以下结果适用于jQuery 1.2.6,可能在Firefox 3.5中.浏览器和jQuery本身的速度提升几乎使这些信息过时了.

我刚写了一个快速的基准测试:

• 在包含4个表单和大约100个其他元素的页面上:
  • 使用$('form.myForm')10000次采用1.367s
  • 使用$('.myForm')10000次需要4.202s(307%)
• 在只有4个表单而没有其他元素的页面上:
  • 使用$('form.myForm')10000次需要1.352s
  • 使用$('.myForm')10000次需要1.443s(106%)

看起来搜索特定名称的元素比搜索特定类的所有元素要快得多.

编辑:这是我的测试程序:http://jsbin.com/ogece

该程序以100个<p>标签和4 <form>秒开始,运行两个不同的测试,删除<p>标签并再次运行测试.奇怪的是,使用这种技术时,form.myForm更慢.亲眼看看代码,然后按照自己的意愿制作代码.

Answer 2

正如redsquare已经提到的,选择算法在后来的jQuery版本中发生了变化(部分原因是由于getElementsByClassName支持).此外,我使用迄今为止最新的jQuery版本(v1.6)对此进行了测试,并为document.getElementsByClassName添加了一个测试用于比较(至少在Firefox 4和Chrome中有效).

Firefox 4中的结果是:

// With 100 non-form elements:
$('.myForm') : 366ms
$('form.myForm') : 766ms
document.getElementsByClassName('myForm') : 11ms

// Without any other elements:
$('.myForm') : 365ms
$('form.myForm') : 583ms
document.getElementsByClassName('myForm') : 11ms

接受的答案已经过时了(通过搜索"在jquery中找到元素的有效方法"仍然可以找到)并且可以误导人,所以我觉得我必须写这个.

另外,看看jQuery和本机浏览器选择器函数之间的时差.在jQuery的1.2.6 $('.myForm')超过300慢倍getElementsByClassName,而在jQuery的1.6是只有约20慢倍,但仍快于$('form.myForm')(与过时的答案).

注意:结果是使用Firefox 4获得的(与Chrome类似的结果).在Opera 10中,使用标签名称进行查询的速度稍快一点,但Opera也支持更快的原生代码getElementsByClassName.

测试代码: http ://jsbin.com/ijeku5

Answer 3

第一个选择器应该更快,因为jQuery可以使用内置函数"getElementsByTagName"来减少它需要过滤的元素数量.第二个必须获取DOM中的所有元素并检查它们的类.