jQuery jquery元素+类选择器性能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11698935/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery element+class selector performance
提问by Lanka
I was hoping $('#childDiv2 .txtClass')or $('#childDiv2 input.txtClass')perform better when selecting <input type="text" id="txtID" class="txtClass"/>element. But according to this performance analysis$('.txtClass');is the best selector among this. I'm using JQuery 1.7.2
Does anybody have explanation for this?
在选择元素时，我希望$('#childDiv2 .txtClass')或$('#childDiv2 input.txtClass')表现得更好<input type="text" id="txtID" class="txtClass"/>。但是根据这个性能分析$('.txtClass');是其中最好的选择器。我正在使用 JQuery 1.7.2 有没有人对此有解释？
HTML
HTML
<div class="childDiv2">
<input type="text" id="txtID" class="txtClass"/>
<p class="child">Blah Blah Blah</p>
</div>?
JS
JS
$('.txtClass');
$('#childDiv2 .txtClass')
$('#childDiv2 > .txtClass')
$('input.txtClass')
$('#childDiv2 input.txtClass')
回答by Frédéric Hamidi
Modern browsers expose a very efficient getElementsByClassName()method that returns the elements having a given class. That's why a single class selector is faster in your case.
现代浏览器公开了一个非常有效的getElementsByClassName()方法，该方法返回具有给定类的元素。这就是为什么在您的情况下单个类选择器更快的原因。
To elaborate on your examples:
详细说明您的示例：
$(".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
As you can see, it's quite logical for the first form to be the fastest on modern browsers.
正如您所看到的，第一种形式在现代浏览器上速度最快是很合乎逻辑的。
回答by klaus
var obj = document.getElementById("childDiv");
xxx = obj.getElementsByClassName("txtClass");
is 30x faster.
快了 30 倍。
回答by Andreas
CSS Selectors are parsed from right to left. So your example
CSS 选择器从右到左解析。所以你的例子
$('#childDiv2 .txtClass')
will take two actions to complete. First find all elements with class txtClass. Then check each element for being a child of the element with the id childDiv2.
将采取两个行动来完成。首先找到所有具有 class 的元素txtClass。然后检查每个元素是否是具有 id 元素的子元素childDiv2。
$('.txtClass')
This selector will just take one action. Find all elements with class txtClass
此选择器只会执行一项操作。查找具有类的所有元素txtClass
Have a look at this articleon css-tricks.com
看看css-tricks.com上的这篇文章
回答by Alexander
Looks like it also depends on the density of the elements with the class among the elements of the type.
看起来它也取决于类型元素之间具有类的元素的密度。
I ran the tests with Google Chrome Version 30.0.1599.69 using JQuery 1.10.1. Feel free to try it on another browser and/or using another JQuery version.
我使用 JQuery 1.10.1 在 Google Chrome 版本 30.0.1599.69 上运行了测试。随意在其他浏览器和/或使用其他 JQuery 版本上尝试。
I tried to run the following tests:
我尝试运行以下测试：
Sparse (10% of the div's have the class) link to the test on jsbin
Dense (90% of the div's have the class) link to the test on jsbin
稀疏（10% 的 div 具有该类）链接到 jsbin 上的测试
密集（90% 的 div 都有类）链接到 jsbin 上的测试
Looks like in the Dense casediv.classwins, but in the Sparse case.classwins.
看起来在Dense 情况下div.class获胜，但在Sparse 情况下.class获胜。
