jQuery元素+类选择器性能

Question

我希望 $('#childDiv2 .txtClass') 或 $('#childDiv2 input.txtClass') 在选择 <input type="text" id="txtID" class="txtClass"/> 元素时表现更好。但据此performance analysis $('.txtClass'); 是其中最好的选择器。我正在使用 JQuery 1.7.2 有人对此有解释吗？

HTML

<div class="childDiv2">
    <input type="text" id="txtID" class="txtClass"/>
    <p class="child">Blah Blah Blah</p>
</div>​

JS

$('.txtClass');
$('#childDiv2 .txtClass')
$('#childDiv2 > .txtClass')
$('input.txtClass')
$('#childDiv2 input.txtClass')

Answer 1

现代浏览器公开了一个非常有效的getElementsByClassName() 方法，它返回具有给定类的元素。这就是为什么在您的情况下单个类选择器更快的原因。

详细说明您的示例：

$(".txtClass")                  =>  getElementsByClassName()

$("#childDiv2 .txtClass")       =>  getElementById(),
                                    then getElementsByClassName()

$("#childDiv2 > .txtClass")     =>  getElementById(),
                                    then iterate over children and check class

$("input.txtClass")             =>  getElementsByTagName(),
                                    then iterate over results and check class

$("#childDiv2 input.txtClass")  =>  getElementById(),
                                    then getElementsByTagName(),
                                    then iterate over results and check class

如您所见，第一种形式在现代浏览器上是最快的，这是很合乎逻辑的。

Answer 2

var obj = document.getElementById("childDiv");
xxx = obj.getElementsByClassName("txtClass");

快 30 倍。

http://jsperf.com/selectors-perf/6

Answer 3

CSS 选择器从右到左解析。所以你的例子

$('#childDiv2 .txtClass')

将采取两个动作来完成。首先找到类txtClass的所有元素。然后检查每个元素是否是 ID 为 childDiv2 的元素的子元素。

$('.txtClass')

这个选择器只会执行一项操作。查找类txtClass的所有元素

在 css-tricks.com 上查看this article

Answer 4

看起来它还取决于类型元素中具有类的元素的密度。

我使用 JQuery 1.10.1 使用 Google Chrome 版本 30.0.1599.69 运行了测试。随意在其他浏览器上尝试和/或使用其他 JQuery 版本。

我尝试运行以下测试：

1. 稀疏（10% 的 div 有类）link to the test on jsbin

2. 密集（90% 的 div 有类）link to the test on jsbin

看起来在密集情况div.class获胜，但在稀疏情况.class获胜。