Производительность селекторов jQuery

Question

HTML-разметка:

<div>

 <a id="foo"> </a>

</div>

JQuery:

$('div').each(function(){

 $('#foo', this).dosmth(); // 1
 $('#foo').dosmth();       // 2

});

Какой метод будет быстрее запускать dosmth?

Answer 1

Поскольку мы получаем множество ответов, надеюсь, здесь есть некоторая ясность ( посмотрите примеры здесь ):

1. Самый быстрый - Нет необходимости зацикливаться. Пропустите часть $("div").each и просто выполните $("#foo"). foo является идентификатором, и поэтому поиск происходит мгновенно.
2. Середина - $("#foo") в цикле. Обратите внимание, что вы также не хотите этого, потому что он будет выполнять функцию для каждого div на странице (и по этой причине для большого документа с большим количеством div это будет самым медленным).
3. Самый медленный - $("#foo", this). Во-первых, контекстный узел не помогает, а затем учтите, что jQuery сначала создаст объект jQuery из this и превратит его в $(this).find("#foo"). Это все ненужно, конечно.

Итог: в большинстве случаев (например, иногда при подтверждении, что идентификатор находится в одном контексте, а не в другом), контекстные узлы не нужны при поиске идентификатора.

Вот некоторые ресурсы из источника jQuery:

• Обработка для большинства случаев здесь - обратите внимание, что $("#id") выделено для обработки как document.getElementById
• find - что происходит при передаче контекста

Answer 2

Поскольку #id должно быть уникальным в DOM, ваша разметка будет недействительной (я предполагаю, что более одного <div/> основано на использовании .each())

Измените id на класс и используйтеследующее:

<div>
 <a class="foo"> </a>
</div>
<div>
 <a class="foo"> </a>
</div>

И скрипт

$('div').each(function(){
   $('.foo', this).dosmth(); //or $(this).find(".foo");
});

Но если у вас есть только один элемент с идентификатором fooвыбор по идентификатору будет самым быстрым, плюс вы можете отказаться от использования .each()

$('#foo').dosmth(); //or document.getElementById("foo");

Answer 3

Селекторы jquery только по id - это самый быстрый способ поиска, потому что он использует getElementbyId в javascript.

так что это самый быстрый:

$('#foo').dosmth();

если вы используете контекст вроде:

$('#foo', this).dosmth();

переведено на:

$(this).find('#foo').dosmth();

, так что это сделает еще одну бесполезную операцию, потому что ваш #foo уникален

С уважением,

Макс

Answer 4

1. Если вы используете идентификатор, он будет только один. Так что вы можете просто сделать:

   $ ( 'а # Foo') dosmth ();.

2. Вам не нужно использовать each (), чтобы пройти через каждый div и получить из него все символы # foo. Это будет тратить время, создавая петли без причины. Вместо этого используйте:

   $ ('a # foo'). Each (function () {...});

или даже просто:

$('a#foo').dosmth();

Вы также можете сделать $('div a#foo').dosmth();, если хотите.

Answer 5

$('#foo', this).dosmth();

Это будет искать в контексте div, а не во всем DOM, что сделает селектор быстрее.Это имеет смысл использовать только когда DOM большой, в противном случае просто используйте обычный селектор: $('#foo').dosmth();

Answer 6

Пожалуйста, прочтите обсуждение ниже относительно этого ответа или проверьте ответ Брайана выше о различиях в скорости селекторов.

Я хотел бы пойти с

   $('a#foo', this).dosmth();

Обновление Но вместо того, чтобы извлекать все деления раньше, я бы в первый раз проверил только желаемый, как этот

$('div a#foo').each(function(){
}