在jQuery中，按类或id选择比通过其他属性选择更快？ [英] In jQuery, is selecting by class or id faster than selecting by some other attribute?
问题描述
基本上是
$("#someid")
或
$(".someclass")
快于
$("[someattr='value']")
我会想象它是（也就是说，按id选择最快，然后选择类，然后选择属性），但有人知道吗？
I would imagine that it is (that is, selection by id is fastest, then class, then attribute), but does anyone know for sure?
推荐答案
ID绝对是最快的。部分原因是ID应该是唯一的，因此API在DOM中找到ID后停止搜索。
ID is absolutely the fastest. Part of the reason is that ID is supposed to be unique, so the API stops searching after the ID is found in the DOM.
如果必须使用类或属性选择器，您可以通过指定可选的上下文参数来提高性能。
If you must use a class or attribute selector, you can improve performance by specifying the optional context parameter.
例如......
$(".someclass", "#somecontainer")
其中 somecontainer 类似于div，包含类 someclass 的元素。在 somecontainer 包含DOM的一小部分的情况下，这可以提供巨大的性能优势。
Where somecontainer is something like a div, surrounding an element with class someclass. This can offer a huge performance benefit in the cases where somecontainer comprises a small fraction of the DOM.
更新：
我做了一些测试几年前面围绕上下文参数。阅读下面的评论后，我很好奇是否有任何改变。事实上，现在的浏览器似乎已经有所改变。也许它也与jQuery的改进有关？我不知道。
I did some tests a couple years ago around the context parameter. After reading the comments below I was curious if anything has changed. Indeed, it seems the scene has changed somewhat with today's browsers. Maybe it also has to do with improvements in jQuery? I don't know.
以下是10,000次迭代的结果（代码如下）：
Here are my results with 10,000 iterations (code is below):
IE9
$（。someclass） - 2793 ms
$(".someclass") - 2793 ms
$（。someclass，＃somecontainer） - 1481 ms
$(".someclass", "#somecontainer") - 1481 ms
Chrome 12
$（。someclass） - 75 ms
$(".someclass") - 75 ms
$（。someclass，＃somecontainer） - 104 ms
$(".someclass", "#somecontainer") - 104 ms
Firefox 3.6
$（。someclass） - 308 ms
$(".someclass") - 308 ms
$（。someclass，＃somecontainer） - 357 ms
$(".someclass", "#somecontainer") - 357 ms
所以在这三大现代浏览器中，context参数似乎只能帮助IE9。较旧的浏览器也将受益于context参数。但是考虑到这些浏览器的流行程度，并将所有浏览器平均化，现在净收益有点差不多了。
So among these big 3 modern browsers, the context parameter only seems to help IE9. Older browsers will also benefit from the context parameter. But considering the prevalence of each of these browsers and averaging everything out, the net gain is somewhat of a wash now.
这是代码，以防万一有人想试试他们自己...
And here's the code in case anyone wants to try it themselves...
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
startTime = new Date().getTime();
for (i = 0; i < 10000; i++)
{
s = $(".someclass");
}
$("#withoutcontext").html(elapsedMilliseconds(startTime));
startTime = new Date().getTime();
for (i = 0; i < 10000; i++)
{
s = $(".someclass", "#somecontainer");
}
$("#withcontext").html(elapsedMilliseconds(startTime));
});
function elapsedMilliseconds(startTime)
{
var n = new Date();
var s = n.getTime();
var diff = s - startTime;
return diff;
}
</script>
</head>
<body>
<h1>jQuery Selector Performance: Context vs No Context</h1>
<h2>$(".someclass")</h2>
<span id="withoutcontext">---</span> ms<br /><br />
<h2>$(".someclass", "#somecontainer")</h2>
<span id="withcontext">---</span> ms<br /><br />
<hr />
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<div id="somecontainer">
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="someclass">someclass</p>
</div>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
<p class="a">a</p>
<p class="b">b</p>
<p class="c">c</p>
</body>
</html>
这篇关于在jQuery中，按类或id选择比通过其他属性选择更快？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
