<form class="myForm">
哪个 jQuery 选择器更高效,为什么?a) $('form.myForm')
b) $('.myForm')
<form class="myForm">
哪个 jQuery 选择器更高效,为什么?a) $('form.myForm')
b) $('.myForm')
$('form.myForm')
搜索 10000 次共计 1.367 秒。
- 使用 $('.myForm')
搜索 10000 次共计 4.202 秒(307%)。
- 在一个只有 4 个表单且没有其他元素的页面上:
- 使用 $('form.myForm')
搜索 10000 次共计 1.352 秒。
- 使用 $('.myForm')
搜索 10000 次共计 1.443 秒(106%)。<p>
标签和 4 个 <form>
开始运行两个不同的测试,然后删除 <p>
标签并再次运行测试。奇怪的是,使用这种技术时,form.myForm 比较慢。看看代码并自行判断吧。如 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')
比 getElementsByClassName
慢300多倍,而在jQuery 1.6中,它只比 $('form.myForm')
慢约20倍(与过时的答案相反),但仍然比后者更快。
注意:这些结果是使用Firefox 4获得的(使用Chrome也可以得到类似的结果)。在Opera 10中,按标签名查询只稍微快一点,但Opera还支持更快的本地 getElementsByClassName
。
测试代码: http://jsbin.com/ijeku5
第一个选择器应该更快,因为jQuery可以使用内置函数"getElementsByTagName"来减少需要过滤的元素数量。第二个选择器必须获取DOM中的所有元素并检查它们的类。
试试slickspeed,你可以看到包括jquery在内的多个js库的选择器速度。
form.myForm 在我的看法中更快,因为它只需要查看子集/过滤集合中的元素,而不需要迭代整个文档。
enobrev,有趣的实例。 我刚刚运行了你的示例,但是使用了jquery 1.3 beta 2 这里。
结果...(1.2.6速度在括号内)
// With 100 non-form elements and Context:
$('.myForm', '#someContainer') : 4063ms (3707ms)
$('form.myForm', '#someContainer') : 6045ms (4644ms)
// With 100 non-form elements:
$('.myForm') : 3954ms (25086ms)
$('form.myForm') : 8802ms (4057ms)
// Without any other elements with Context:
$('.myForm', '#someContainer') : 4137ms (3594ms)
$('form.myForm', '#someContainer') : 6627ms (4341ms)
// Without any other elements:
$('.myForm') : 4278ms (7303ms)
$('form.myForm') : 8353ms (4033ms)