Слишком много недостатков

Если у меня на странице нет необходимости id для элементов, например, HTML Helper в ASP.Net-MVC.
Уменьшает ли это число моих селекторов id? (У меня есть страница с огромным количеством элементов)

Пример:

// First DOM   
<HTML>
...
    <input type="text" value="first" id="useless" />
    <input type="text" value="second" id="useful" />
</HTML>

// Second  DOM  
<HTML>
...
    <input type="text" value="first"/>
    <input type="text" value="second" id="useful" />
</HTML>

Script:

<script>
    alert($('#useful').val());
    // never select the first element (with the useless id)
</script>

Ответы

Ответ 1

Короткий ответ, нет.

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

Несколько месяцев назад появились сообщения о влиянии неэффективных селекторов CSS. Я был заинтригован - это своеобразное идиосинкратическое поведение браузера, в котором я живу. По дальнейшему расследованию я не настолько уверен, что стоит потратить время на то, чтобы сделать селектора CSS более эффективными. Я пойду еще дальше и скажу, что я не думаю, что кто-нибудь заметит, если мы проснемся завтра, и каждый веб-сайт CSS-селекторов был волшебным образом оптимизирован...

Я пересмотрел тест следующим образом:

  • 2000 якорей и 2000 правил (вместо 20 000) - это фактически приводит к ~ 6000 элементам DOM из-за всей вложенности в P, DIV, DIV, DIV
  • Страница выбора базовой страницы и селектора тегов имеет 2000 правил, как и все остальные страницы, но это простые правила класса, которые не соответствуют любым классам на странице

Я провел эти тесты в 12 браузерах. Время рендеринга страницы измерялось блоком script в верхней и нижней частях страницы. (Я загрузил страницу с локального диска, чтобы избежать возможного влияния на кодирование с чередованием.)...

На основе этих тестов у меня есть следующая гипотеза: для большинства веб-сайтов возможная прибыль от оптимизации селекторов CSS будет небольшой и не стоит затрат. Существуют некоторые типы правил CSS и взаимодействия с JavaScript, которые могут сделать страницу заметно медленнее. Именно в этом фокус должен быть...

Ответ 2

Выбор идентификатора происходит очень быстро, так как jQuery выполняет резервное копирование на собственный

 document.getElementById

функция. Тем не менее, вы можете кэшировать свои селекторы, если вы часто их используете (сохраняйте их в переменной).

Ответ 3

Пока производительность JavaScript не будет затронута, тысячи идентификаторов увеличивают ваш HTML-код, увеличивая время загрузки и стоимость трафика. Это, вероятно, незначительно (сжатие изображений и других ресурсов гораздо важнее), но тем не менее это может быть маршрут для оптимизации.

Ответ 4

Выбор элементов по id в jQuery - один из немногих селекторов, которые не получат удар производительности, если на странице много элементов.

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

var element = $("#specificElement");
console.log(element.val());