Jquery元素+类选择器性能

Question

我在选择元素时希望$('#childDiv2 .txtClass')或$('#childDiv2 input.txtClass')表现得更好<input type="text" id="txtID" class="txtClass"/>.但根据这种表现,分析 $('.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上查看这篇文章