假设我想获得“.answer”类中所有元素中的第一个元素
$($(".answer")[0])
我可以做到这一点,但优雅和速度之间的最佳平衡是什么?
*改变了问题以反映当前的讨论
以下都是功能相同的(虽然不是速度):
var a0 = $($('.answer')[0]);
var a0 = $('.answer').first();
- 见http://api.jquery.com/first/var a0 = $('.answer:first');
- 见http://api.jquery.com/first-selector/var a0 = $('.answer').eq(0);
- 见http://api.jquery.com/eq/var a0 = $('.answer:eq(0)');
- 见http://api.jquery.com/eq-selector/哪个最好? 它has been hypothesized选择器版本应该比方法版本更快(并且逻辑有一定意义)但我还没有找到可靠的跨浏览器,多文档基准测试,证明这是真的。
在某些情况下,你不能使用选择器,因为你有一个由链式结果产生的jQuery对象,并且必须在以后削减它。
编辑:根据以下@ yc测试的优秀信息,以下是当前(2011年2月4日)测试结果汇总并与.answer:first
的基线进行比较:
:first :eq(0) .first() .eq(0) $($('...')[0]) Chrome 8+ 100% 92% 224% 266% 367% FF 3.6 100% 100% 277% 270% 309% FF 4.0b 100% 103% 537% 521% 643% Safari 5 100% 93% 349% 352% 467% Opera 11 100% 103% 373% 374% 465% IE 8 100% 101% 1130% 1246% 1767% iPhone 4 100% 95% 269% 316% 403% ===================================================== Weighted 100% 92% 286% 295% 405% Major 100% 95% 258% 280% 366%
总之:假设(目前)是错误的。这些方法明显快于Sizzle选择器,并且几乎没有例外,OP的代码$($('.answer')[0])
是最快的!
我不能说优雅的方面,但这里的表现方面实际上可以产生巨大的差异。
看起来,from a set of JavaScript testing,你的原始方法实际上是最有效的方法,并且与假设接受的非CSS Sizzle选择器的效果相比,方法选择器的效率低得多。这是有原因的。 $('.answer')
可以使用浏览器本机getElementsByClass()
而无需手动遍历结果。 :first
选择器使其复杂化。在这种情况下,使用嘶嘶声选择器似乎会使选择速度减慢4-5倍。
我认为,使用jQuery,性能应该胜过优雅,所有证据(到目前为止我测试的每一个浏览器!)似乎都表明OP的优雅解决方案是最快的。
以下是测试运行次数最多的浏览器的结果:
(这些数字是'每秒操作数',所以数字越高,数字越慢。)