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）从右到左读取。 唯一的例外是，如果最左边是id ，则该id用于确定搜索范围。

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

在有关“更快”的一系列选项中，这将以最快的速度执行：

$('#panel p.xyz');

因为它将搜索范围限定为单个元素，然后找到p标记，然后从选择中删除所有没有适当类的标记。

在某些浏览器中，具有许多其他不符合您查询条件的同级p标签，它的执行速度将比：

$('#panel .xyz');

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

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

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

最后一个示例是您永远不应该做的一件事：

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

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

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

Answer 2

最快的选择器始终是ID选择器，或者是从其选择的选择器。 在您的情况下：

$('#panel .xyz'); and $('#panel p.xyz');

速度几乎相同，所以关闭并不重要...但是非ID的性能落后几个数量级。

在SO的另一个问题中，对此也已经有健康的答案。

Answer 3

“ ...但是不知道如何测试最快的。”

看看萤火虫。 特别是Javascript Profiler。 基本上：

安装firebug Firefox插件。
右键单击Firefox右下角的小错误图标。 选择“启用所有面板”。
单击“控制台”选项卡。
点击“个人资料”选项。 将鼠标悬停在其上方时会显示“配置文件Javascript执行时间”。 其余的应该相当直观。 如果您发现事实并非如此，则有很多教程可以帮助您。

现在，您可以尝试使用不同的选择器/ DOM结构，并测量它们的相对执行时间，以更好地了解哪些选择器实际上可感知地影响Web应用程序的性能。

希望有所帮助。