29

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

类选择器的性能分析

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')
4

4 回答 4

55

现代浏览器公开了一个非常有效的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

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

于 2012-07-28T07:23:41.513 回答
8 
var obj = document.getElementById("childDiv");
xxx = obj.getElementsByClassName("txtClass");

快 30 倍。

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

于 2013-03-12T18:14:51.347 回答
6

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

$('#childDiv2 .txtClass')

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

$('.txtClass')

这个选择器只会采取一个动作。查找所有具有类的元素txtClass

在 css-tricks.com 上查看这篇文章

于 2012-07-28T07:24:26.977 回答
1

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

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

我尝试运行以下测试：

  1. 稀疏（10% 的 div 有类）链接到 jsbin 上的测试

  2. 密集（90% 的 div 有类）链接到 jsbin 上的测试

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

于 2013-10-16T13:56:40.737 回答