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

回答right from the horse's mouth：

附加说明：

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

我应该补充说，前面提到的querySelectorAll API是supported in all modern browsers，因此可以“无差别地”用作getElementById等的替代品。

Answer 2

jQuery是基于Sizzle library构建的。 Sizzle尽可能利用原生浏览器调用。

'tr'是querySelectorAll的有效选择器，可以非常快速地运行。获取'tr'元素列表后，.eq()只会进行非常快速的索引查找。

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

基准测试中的这种差异在jQuery docs for :eq()：

中注明

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

Answer 3

jQuery不需要将输入字符串拆分为函数，并将此字符串函数序列转换为适当的方法调用。

Answer 4

我不确切知道为什么，但我在另一种语言中遇到类似的问题，这取决于功能本身：

$("tr:eq(0) td");需要解析才能工作，然后进行函数调用。

$("tr").eq(0).find("td");只能调用函数

为什么jQuery $（“td：eq（0）”）慢于$（“td”）。eq（0）

4 个答案: