javascript - JQuery:选择器性能

Question

我有以下 HTML:

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

问题:使用 JQuery 访问 p.xyz 元素的最快方式是什么？ I've read some performance reviews但它们并没有考虑到所有不同的场景。

我可以执行以下操作，但不知道如何测试哪个最快。

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

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

>>> 哪种方式是最快且推荐的方式？

Answer 1

任何时候您可以使用 ID 选择器，速度都会更快。 jQuery 选择器引擎 (Sizzle) 从右向左读取。唯一的异常(exception)是，如果最左侧是 id，则该 id 用于确定搜索范围。

此外，由于 jQuery 尽可能使用 native 浏览器功能，因此在使用类选择器时始终提供标签名称。

在关于“什么更快”的一系列选项中，这将执行最快:

$('#panel p.xyz');

因为它将搜索范围限制为单个元素，然后找到 p 标记，然后从选择中删除所有不具有正确类的元素。

在某些浏览器中，由于有许多其他同级 p 标记不应该与您的查询匹配，因此它的执行速度会比:

$('#panel .xyz');

请记住，jQuery 使用尽可能多的 native 功能。 每个主流浏览器都有getElementById，因此请尽可能使用id。

接下来，每个浏览器都有一个getElementsByTagName。某些浏览器没有 getElementsByClassName。因此，jQuery 可以通过在可能的情况下使用 id 来确定搜索范围，并将标签名称与类配对以进行类搜索，从而帮助您。

永远不要将 jQuery 对象作为作用域参数传递

你不应该做的一件事是你的最后一个例子:

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

与使用普通字符串相比，这不会对速度产生影响(并且在循环中会更慢)。只有每次都会将 DOM 元素传递到此参数中。当您已经拥有 DOM 元素时，这会非常有用:

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