在jQuery中，按類或id選擇比通過其他屬性選擇更快？
[英]In jQuery, is selecting by class or id faster than selecting by some other attribute?
問題描述
基本上是
$("#someid")
要么
$(".someclass")
比...快
$("[someattr='value']")
我會想象它是（也就是說，通過id選擇是最快的，然后是類，然后是屬性），但有人知道嗎？
6 個解決方案
解決方案1
71 已采納 2011-06-23 21:20:04
ID絕對是最快的。 部分原因是ID應該是唯一的，因此API在DOM中找到ID后停止搜索。
如果必須使用類或屬性選擇器，則可以通過指定可選的上下文參數來提高性能。
例如...
$(".someclass", "#somecontainer")
somecontainer就像div一樣，圍繞一個帶有someclass類的元素。 在某些somecontainer包含一小部分DOM的情況下，這可以提供巨大的性能優勢。
更新：
幾年前我圍繞上下文參數做了一些測試。 閱讀下面的評論后，我很好奇是否有任何改變。 事實上，現在的瀏覽器似乎已經有所改變。 也許它也與jQuery的改進有關？ 我不知道。
以下是10,000次迭代的結果（代碼如下）：
IE9
$(".someclass") - 2793 ms
$(".someclass", "#somecontainer") - 1481 ms
Chrome 12
$(".someclass") - 75毫秒
$(".someclass", "#somecontainer") - 104毫秒
Firefox 3.6
$(".someclass") - 308毫秒
$(".someclass", "#somecontainer") - 357 ms
所以在這三大現代瀏覽器中，context參數似乎只對IE9有所幫助。 較舊的瀏覽器也將受益於context參數。 但考慮到這些瀏覽器的流行程度，並將所有內容平均化，現在凈收益有點大。
這是代碼，以防任何人想要自己嘗試...
<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>
解決方案2
11 2011-06-23 21:16:01
按ID選擇是最快的，因為它直接映射到getElementByID，另外2個必須檢查每個元素以確定所選元素。
如果必須使用類或屬性進行選擇，請嘗試將搜索括在ID中。 恩。
$("#someid .someclass")
解決方案3
7 2014-01-20 12:02:47
ID是唯一的，如果您只想在此處選擇一個/第一個元素，則等效
$（“＃someid”）=> 75,695 ops / sec，最快
$（。unique_class'）=> 45,257 ops / sec，慢40％：頁面上只有一個類
$（“。someclass”）。first（）=> 42,217 ops / sec，慢46％：頁面上有多個類，選擇第一個元素
$（“。someclass：eq（0）”）=> 18,324 ops / sec，慢76％：頁面上有多個類，在所選索引處選擇元素
解決方案4
7 2011-06-23 21:14:33
ID和類選擇器，至少在它們自己使用時，往往更快，無論是jQuery還是CSS。 這主要是因為瀏覽器在其DOM / CSS引擎中具有針對ID和類的優化算法。
在具有最新版本jQuery的現代瀏覽器中，任何被瀏覽器理解為受支持的CSS選擇器的選擇器字符串都將由document.querySelectorAll()處理，只要使用標准CSS選擇器，就可以提供最高性能。 非標准選擇器或舊瀏覽器由jQuery和/或Sizzle庫負責，它們盡最大努力利用DOM的get-element（s）方法來遍歷DOM。
要記住的最重要的事情是，由於DOM實現的不同，性能會因瀏覽器（版本）和瀏覽器（版本）而異。 至少，這就是我相信事物的方式。
解決方案5
2 2011-06-23 21:24:15
id永遠是最快的，因為它在頁面上是唯一的。 類“可能”比屬性更快，但它取決於。
這里真正的踢球者是選擇一個類，ID可能不比選擇類更快。 它取決於頁面和瀏覽器。 在我的測試中，選擇具有有限數量元素的復雜頁面，其中“class”的類元素的父元素具有如下標識：
<div id='iamout'>
<div class='aonther'>
<div class='iamin'>stuff</div>
<div class='iamin'>stuff</div>
</div>
</div>
一個選擇器，如$('.iamin','#iamout')並不總是和$('.iamin')一樣快
並非所有瀏覽器都支持按類名（本機）進行選擇，但是現代/新版瀏覽器支持選擇，因此它可能會提供更好的性能，具體取決於您擁有的瀏覽器。
如果您需要獲得最佳性能，則需要測試您的確切頁面。
解決方案6
0 2011-06-23 21:15:18
Id是最快的，因為它是唯一可以擁有該標識符的元素。 許多對象可能具有相同的類名。 有人可以驗證這一點，但似乎一旦找到id就不需要再遍歷文檔了。 對於課程，情況可能並非如此？ HTH
用jQuery選擇附加ID屬性
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.