Самый эффективный способ найти элементы в jQuery

Question

Если у меня есть класс CSS, который я только применяю к элементам формы, например:

<form class="myForm">

Какой из этих двух селекторов jQuery наиболее эффективен и почему?

a) $('form.myForm')

b) $('.myForm')

Answer 1

Редактировать : Ниже приведены результаты для jQuery 1.2.6, возможно, в Firefox 3.5. Улучшения скорости в браузерах и самом jQuery в значительной степени сделали эту информацию устаревшей.

---

Я только что написал быстрый тест бенчмаркинга:

• На странице с 4 формами и около 100 других элементов:
  • Использование $('form.myForm') 10000 раз заняло 1,367 с
  • Использование $('.myForm') 10000 раз заняло 4,202 с ( 307% )
• На странице только с 4 формами и без других элементов:
  • Использование $('form.myForm') 10000 раз заняло 1.352 с
  • Использование $('.myForm') 10000 раз заняло 1.443 с ( 106% )

Похоже, что поиск элементов определенного имени выполняется намного быстрее, чем поиск всех элементов определенного класса.

Редактировать: Вот моя тестовая программа: http://jsbin.com/ogece

Программа запускается с тегами 100 <p> и 4 <form> с, запускает два разных теста, удаляет теги <p> и снова запускает тест. Странно, но при использовании этой техники form.myForm медленнее . Взгляните на код для себя и сделайте из него что хотите.

Answer 2

Как уже упоминалось в redsquare, алгоритм выбора изменился в более поздних версиях jQuery (частично из-за поддержки getElementsByClassName). Кроме того, я протестировал это с самой последней версией jQuery на сегодняшний день (v1.6), а также добавил тест для document.getElementsByClassName для сравнения (работает по крайней мере в Firefox 4 и Chrome).

Результаты в Firefox 4 были:

// With 100 non-form elements:
$('.myForm') : 366ms
$('form.myForm') : 766ms
document.getElementsByClassName('myForm') : 11ms

// Without any other elements:
$('.myForm') : 365ms
$('form.myForm') : 583ms
document.getElementsByClassName('myForm') : 11ms

Принятый ответ устарел (и все еще находится в поиске чего-то вроде «эффективного способа поиска элементов в jquery») и может вводить людей в заблуждение, поэтому я почувствовал, что должен написать это.

Кроме того, обратите внимание на разницу во времени между функциями jQuery и родным селектором браузера. В jQuery 1.2.6 $('.myForm') был более чем в 300 раз медленнее, чем getElementsByClassName, в то время как в jQuery 1.6 он был только примерно в 20 раз медленнее, но все еще быстрее чем $('form.myForm') (вопреки устаревшему ответу).

Примечание: Результаты были получены с Firefox 4 (аналогичные результаты с Chrome). В Opera 10 запросы с именем тега выполняются лишь немного быстрее, но Opera также поддерживает гораздо более быстрый родной getElementsByClassName.

Код теста: http://jsbin.com/ijeku5

Answer 3

Первый селектор должен быть быстрее, потому что jQuery может использовать встроенную функцию «getElementsByTagName», чтобы уменьшить количество элементов, которые необходимо отфильтровать. Второй должен получить все элементы в DOM и проверить их класс.

Answer 4

Попробуйте Slickspeed , где вы можете увидеть приблизительные скорости селекторов по множеству js-библиотек, включая jquery.

Answer 5

Первый пример работает намного быстрее при использовании с контекстом. Второй пример тоже идет быстрее, но ненамного. Я расширил ваш пример для сравнения с контекстом:

http://jsbin.com/uluwe

Answer 6

form.myForm IMO намного быстрее, так как нужно только взглянуть на подмножество / отфильтрованный набор элементов и не нужно перебирать весь документ.

Answer 7

Да ладно, ребята? Ты сумасшедший? Самый быстрый способ выбора элемента - самый короткий путь:

$ ('. MyForm') намного быстрее, чем $ ('form.myform'), потому что второй вариант должен выполнить дополнительную проверку, чтобы убедиться, что элемент имеет указанное tagName. МОЖЕТ, новый jquery 1.3 изменит это, но в последней стабильной версии неправильно указывать также tagName. Вы должны прочитать здесь .

Мне кажется, я где-то читал, что MooTools намного быстрее в этом смысле. Ну, может быть, в Moo, не знаю, но в jQuery это самый быстрый способ.

взгляните на этот профилировщик:

( большая картинка )

первый - только с идентификатором, второй - с идентификатором формы # (проверено на странице моего блога) и работает точно так же для селектора классов.

Answer 8

енобрев, Интересно. Я только что запустил твой пример, но использую jquery 1.3 beta 2 здесь

Результаты .... (1.2.6 скорость в скобках)

// With 100 non-form elements and Context:
$('.myForm', '#someContainer') : 4063ms (3707ms)
$('form.myForm', '#someContainer') : 6045ms (4644ms)

// With 100 non-form elements: 
$('.myForm') : 3954ms (25086ms)
$('form.myForm') : 8802ms (4057ms)

// Without any other elements with Context: 
$('.myForm', '#someContainer') : 4137ms (3594ms)
$('form.myForm', '#someContainer') : 6627ms (4341ms)

// Without any other elements: 
$('.myForm') : 4278ms (7303ms) 
$('form.myForm') : 8353ms (4033ms)