jQuery 优化选择器

Question

有一天，当我在 jQuery 中输入选择器时，我想知道如果您将选择器指定得非常具体或非常宽松，性能是否会有所不同。

例如

$('$myId .someElement')

或者

$('table#myId > tbody > tr > td > div.someElement');

第二个选项会快很多还是差异可以忽略不计，比如在执行 .each() 时，如果您需要一遍又一遍地查找相同的元素。

Answer 1

更新2:

在这里总结一些其他评论。答案是这取决于。

jQuery 的选择器引擎 Sizzle 以与 CSS 相同的方式评估选择器:from right to left 。因此，一般来说，最好在右侧非常具体，而在左侧不太具体。

但这也取决于 HTML 的结构以及您想要查找的元素的分散程度。

如果你有

                         a
                         |
                        ...
                         |
                         b
                 -----------------
                 |               |
d d d c c c c c   c c c c c c c c   c c c c c c

那么更具体会更快$('a b > c')，因为您可以使用 b > c 尽早减少元素集，而不必检查每个 c 的 a 继承。

如果你有

                         a
                         |
                        ...
                         |
                         b
                 -----------------
                 |               |
e e e e e e e e   d d c c c c c c   e e e e e e

那么 $('a c') 会更快，因为选择器更简单，并且测试 c 是否是 b 的子级在这种情况下是多余的(当然你甚至可以这样做 $('c'))。

<小时/>

原始答案:

无论哪一个更快，如果您必须一遍又一遍地访问某个元素，存储对其的引用:

var $element = $('#myId .someElement');

$('some other selector').each(function() {
    // access $element here
});

<小时/>

The first selector seems to be a bit faster (在 Chrome 8 中)。

在较新的浏览器(支持 querySelectorAll)中，差异可能没有不支持它的浏览器那么大。

更新:

我认为这主要取决于 jQuery 可以使用多少种内置方法。因此，假设 querySelector* 不可用，第一个选择器可以转换为

document.getElementById('myId')[0].getElementsByClassName('someElement')

对于第二个选择器，jQuery 必须另外检查元素是否确实是子元素。 IE。还涉及更多处理。