Эффективные методы выбора DOM - Является ли выбор по атрибуту медленным?

Question

Я использую скрипт, чтобы все входные данные имели заполнитель в браузерах, которые еще не поддерживают эту функцию.

В этом скрипте я использую

$('input[placeholder]').each(function() {

, чтобы выбрать все элементыдействовать.

Мне было интересно, если это может быть медленным, поскольку это не очень специфический выбор, как

$('#input').each(function() {

, который, как я знаю, выбирает путь быстрее (но я не хочу указыватьвсе идентификаторы отдельно).

Вы бы порекомендовали добавить классы ко всем входам с атрибутом заполнителей следующим образом:

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

, чтобы сделать выбор быстрее (я думаю, что выбор по классу быстреечем атрибутом).Но это неправильно использовало бы назначение классов CSS, только означающее стиль, и это наполнило бы дом.

Есть ли у вас какие-либо предложения или методы для улучшения подобных задач?

Answer 1

Я выбрал JSPerf для сравнения селекторов input[placeholder], .hasPlaceholder и input с .filter().

Теперь, когда у нас есть некоторые цифры, давайте поговорим о том, почему вы хотите знать.

Когда вы выполняете этот поиск для 'input[placeholder]'?Надеюсь, только один раз.Если вы сделаете любой из этих селекторов в современном браузере, они будут довольно быстрыми (число операций в секунду ....).Однако, если вы знаете, что вы используете эти селекторы только в браузерах, которые не поддерживают заполнители, из трех перечисленных методов, .hasPlacehoder на самом деле самый медленный в IE 6 с выигрышем пользовательского фильтра.Вы хотите попробовать протестировать производительность в браузерах, на которую на самом деле повлияет этот код ..

Не стесняйтесь добавлять свои собственные селекторы или, что еще лучше, приблизиться к своему точному HTML на этой странице и попросить провести тестирование браузера!

Редактировать: Я добавил input.hasPlaceholder к гонке на новой скорости ...

Answer 2

Если у вас нет массивного DOM, я не думаю, что разница в производительности действительно должна проявиться.Установка целого ряда классов для целей «оптимизации», как вы сказали, портит логическую структуру вашего документа.

Выбор по классу без предоставления контекста все равно приведет к тому, что весь DOM будетпройден.То же самое касается выбора по элементам, я думаю.Использование классов-заполнителей здесь определенно не ответ.Что вы хотите сделать, это найти все входные элементы с определенным атрибутом - и вы используете правильный селектор для этой цели.

Answer 3

Это не медленно (вы проверяли или просто размышляли?). Но используйте классы, если это так.

Answer 4

Что ж, вы можете дать своей форме идентификатор и затем использовать $("#theForm input[placeholder]"), который сократит количество элементов, которые должен учитывать селектор.