ID абсолютно быстрый.Частично причина в том, что идентификатор должен быть уникальным, поэтому API прекращает поиск после того, как идентификатор найден в DOM.
Если вам нужно использовать селектор класса или атрибута, вы можете повысить производительность, указавнеобязательный параметр контекста.
Например ...
$(".someclass", "#somecontainer")
Где somecontainer - это что-то вроде div, окружающее элемент классом someclass.Это может дать огромный выигрыш в производительности в тех случаях, когда somecontainer составляет небольшую часть DOM.
ОБНОВЛЕНИЕ:
Несколько лет назад я провел несколько тестов вокруг параметра контекста.После прочтения комментариев ниже мне было любопытно, изменилось ли что-нибудь.Действительно, кажется, что сцена изменилась несколько с сегодняшними браузерами.Может быть, это также связано с улучшениями в jQuery?Я не знаю.
Вот мои результаты с 10 000 итераций (код ниже):
IE9
$(".someclass") - 2793 мс
$(".someclass", "#somecontainer") - 1481 мс
Chrome 12
$(".someclass") - 75 мс
$(".someclass", "#somecontainer") - 104 мс
Firefox 3.6
$(".someclass") - 308 мс
$(".someclass", "#somecontainer") - 357 мс
Так что среди этих больших 3 современныхбраузеры, параметр контекста, кажется, только помогает 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>