为什么jQuery $("td:eq(0)")慢于$("td").eq(0)

Question

我正在使用jQuery 1.7.1,我试图找出为什么以下代码需要4600 MS,如果我更改:eq(0)为:first它是相同的结果.

$("tr:eq(0) td"); // x10000 takes 4600ms
$("tr").eq(0).find("td"); // x10000 takes 470ms

第二个代码差不多快10倍!它的写法不同.

此外,如果我使用选择器,只需选择一个ID或在节点内查找:

someparent.find("#test") // x10000 takes 500ms
$("#test") // x10000 takes 100ms
$("div#test") // x10000 takes 470ms

我会说,如果我通过一个div#test比#test它快,但它慢了5倍.为什么？

我已经完成了所有的运行几次,如果我做同样的事情,它真的很慢.

为什么使用选择器然后使用函数？

Answer 1

从马的嘴里回答:

补充说明:

因为:eq()是jQuery扩展而不是CSS规范的一部分,所以使用查询:eq() 无法利用本机DOM querySelectorAll() 方法提供的性能提升.要在现代浏览器中获得更好的性能,请 $("your-pure-css-selector").eq(index)改用.

我应该补充说,所有现代浏览器querySelectorAll都支持上述API ,因此它可以"不加选择地"用作替代getElementById等等.

Answer 2

jQuery是基于Sizzle库构建的.Sizzle尽可能利用本机浏览器调用.

'tr'是一个querySelectorAll非常快速运行的有效选择器.'tr'获取元素列表后,.eq()只需执行非常快速的索引查找.

'tr:eq(0)' 不是有效的选择器,因此它必须迭代DOM中的每个元素.

基准测试中的这种差异在jQuery文档中:eq()注明:

因为:eq()是jQuery扩展而不是CSS规范的一部分,所以使用查询:eq()无法利用本机DOM querySelectorAll()方法提供的性能提升.要在现代浏览器中获得更好的性能,请$("your-pure-css-selector").eq(index)改用.