Ответ 1
Идентификатор абсолютно быстрый. Одна из причин заключается в том, что идентификатор должен быть уникальным, поэтому API прекращает поиск после того, как идентификатор найден в DOM.
Если вы должны использовать селектор классов или атрибутов, вы можете повысить производительность, указав необязательный параметр контекста.
Например...
$(".someclass", "#somecontainer")
Где somecontainer - это что-то вроде div, окружающего элемент с классом someclass. Это может обеспечить огромное преимущество в производительности в случаях, когда somecontainer содержит небольшую часть DOM.
UPDATE:
Несколько лет назад я провел несколько тестов вокруг параметра контекста. Прочитав комментарии ниже, мне было любопытно, если что-то изменилось. Действительно, кажется, что сцена несколько изменилась с сегодняшними браузерами. Может быть, это также связано с улучшениями в 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. Старые браузеры также получат выгоду от параметра контекста. Но, учитывая преобладание каждого из этих браузеров и усреднение всего, чистая прибыль сейчас немного стирается.
И вот код, если кто-то захочет попробовать его сами...
<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>