javascript - 这些选择器中的哪个可能更快？

Question

其实有几个问题，

鉴于以下两个将返回相同的结果集

$("#MyTable tr");
$("tr", "#MyTable");

使用父子 CSS 选择器约定或为选择器指定上下文之间在性能上有什么区别？

另外，鉴于我可以保证 tr 将是表的直接子级，这会提高上述性能吗？

$("#MyTable>tr")

score 3 · Accepted Answer

$("#MyTable > tr")可能实际上不起作用，因为您应该将 thead/tfoot 或 tbody 作为表的直接子级。我认为 ff/chrome 等会为您添加 tbody，因此选择器应该是

$("#MyTable > tbody > tr")

score 1 · Accepted Answer

到目前为止，这三个中最快的是：

$("#MyTable > tr")

因为您通过 id 选择元素引用的直接后代，所以选择非常直接。

编辑：@redsquare 指出上述内容在 Firefox 和 Chrome 中不起作用，因为这些浏览器会将 tbody 元素附加到表中。

上下文选择器基本上是转换成'finds'，所以前两个中最慢的是：

$("tr", "#MyTable");

因为它在任何选择发生之前被转换成这样的东西：

$('#MyTable').find('tr');

当然，您自己进行基准测试可能对您大有裨益。

以下是之前在 SO 上提出的一些相关问题：

2 回答 2