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获胜。