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

Question

我正在使用 jQuery 1.7.1，我试图找出为什么以下代码需要 4600 毫秒，如果我将 :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 :

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.

我应该补充一点，前面提到的 querySelectorAll API 是 supported in all modern browsers ，因此它可以“不加区别地”用作 getElementById 等的替代品。