JQuery:选择器性能

Question

我有以下HTML:

...
<div id="panel">
    <div class="abc">
        <p class="xyz">Hello</p>
    </div>
</div>
...

问题:使用JQuery访问p.xyz元素的最快方法是什么？我已经阅读了一些性能评估,但它们没有考虑所有不同的情况.

我可以做以下,但不知道如何测试哪个是最快的.

$('.xyz');
$('p.xyz');
$('#panel .xyz');
$('#panel p.xyz');
$(".xyz", $('#panel'));

我确信还有更多方法可以访问该节点.

>>> 哪种方式最快,最推荐？

Answer 1

任何时候你可以使用ID选择器它会更快.jQuery选择器引擎(Sizzle)从右到左阅读.唯一的例外是如果在最左边是a id,则id用于搜索范围.

此外,由于jQuery尽可能使用本机浏览器功能,因此在使用类选择器时始终提供标记名称.

在一系列关于"什么是更快"的选项中,这将是最快的:

$('#panel p.xyz');

因为它会将搜索范围限定为单个元素,然后找到p标记,然后从选择中删除所有没有正确类的选择.

在某些浏览器中,许多其他兄弟p标记与您的查询不匹配,它的执行速度比以下快得多:

$('#panel .xyz');

请记住,jQuery使用尽可能多的本机功能.每个主流浏览器都尽可能getElementById使用id.

接下来,每个浏览器都有一个getElementsByTagName.一些浏览器没有的是getElementsByClassName.因此,帮助jQuery通过id尽可能使用搜索范围,以及将标记名称与类搜索类配对来帮助您.

永远不要传递jQuery对象作为scope参数

有一件事你应该永远不会做的,是你的最后一个例子:

$(".xyz", $('#panel'));

与使用普通字符串相比,这将没有速度影响(并且在循环中它会更慢).每次只将DOM元素传递给此参数.当您已经拥有DOM元素时,这非常有用:

$("#panel").click(function(){
  var p = $("p.xyz", this); // This is fast
});