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

Why is jQuery $("td:eq(0)") slower than $("td").eq(0)

提问by Niels

I am using jQuery 1.7.1 and I'm trying to find out why the following code takes 4600 MS, if I change the :eq(0)to :firstit is the same result.

我正在使用 jQuery 1.7.1，我试图找出为什么下面的代码需要 4600 毫秒，如果我:eq(0)将:first它更改为相同的结果。

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

The second codes is almost 10 times as fast! And it's only written differently.

第二个代码几乎快了 10 倍！它只是写得不同。

Also if I use a selector like, just selecting an ID or looking within a node:

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

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

I would say, if I pass an div#testwould be faster than #testbut it is 5 times slower. Why?

我会说，如果我通过 andiv#test会比#test它快，但它会慢 5 倍。为什么？

I have done all runs a couple of times and it is real slow if I do the same thing different.

我已经完成了几次所有运行，如果我以不同的方式做同样的事情，它真的很慢。

Why is using the selector slower then using functions?

为什么使用选择器比使用函数慢？

回答by Jon

Answer right from the horse's mouth:

从马嘴里回答：

Additional Notes:

Because :eq()is a jQuery extension and not part of the CSS specification, queries using :eq()cannot take advantage of the performance boost provided by the native DOM querySelectorAll()method. For better performance in modern browsers, use $("your-pure-css-selector").eq(index)instead.

补充笔记：

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

I should add that the aforementioned querySelectorAllAPI is supported in allmodern browsers, so it can be "indiscriminately" used as a drop-in replacement for getElementByIdetc.

我应该补充一点，所有现代浏览器querySelectorAll都支持上述API ，因此可以“不加选择地”将其用作getElementById等的替代品。

回答by zzzzBov

jQuery is built off the Sizzle library. Sizzle takes advantage of native browser calls wherever possible.

jQuery 建立在Sizzle 库之上。Sizzle 尽可能利用本地浏览器调用。

'tr'is a valid selector for querySelectorAllwhich operates very quickly. Once the list of 'tr'elements is acquired, .eq()simply does an index lookup which is very fast.

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

'tr:eq(0)'is not a valid selector, so it has to iterate over every element in the DOM.

'tr:eq(0)'不是一个有效的选择器，所以它必须遍历 DOM 中的每个元素。

This discrepancy in benchmarking is noted in the jQuery docs for :eq():

jQuery 文档中:eq()指出了这种基准测试的差异：

Because :eq()is a jQuery extension and not part of the CSS specification, queries using :eq()cannot take advantage of the performance boost provided by the native DOM querySelectorAll()method. For better performance in modern browsers, use $("your-pure-css-selector").eq(index)instead.

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

回答by Rich O'Kelly

jQuery does not need to split the input string into functions and convert this sequence of string functions into appropriate method calls.

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

回答by Marco Pace

I don't know exactly why, but I hade a similar problem in another language and it depends on the function itself:

我不知道确切的原因，但我在另一种语言中遇到了类似的问题，这取决于函数本身：

$("tr:eq(0) td");needs to be parsed to work, and then do the function call.

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

$("tr").eq(0).find("td");only does the function call

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