Слишком много идентификаторов ухудшают производительность - PullRequest
Новая
       5

Слишком много идентификаторов ухудшают производительность

20 голосов
/ 08 февраля 2012

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

Пример: 

// 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>
    alert($('#useful').val());
    // never select the first element (with the useless id)
</script>

Ответы [ 4 ]

17 голосов
/ 08 февраля 2012

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

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 браузерах.Время отрисовки страницы измерялось с помощью блока скриптов вверху и внизу страницы.(Я загрузил страницу с локального диска, чтобы избежать возможного влияния фрагментарного кодирования.) ...

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

5 голосов
/ 08 февраля 2012

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

 document.getElementById

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

2 голосов
/ 08 февраля 2012

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

1 голос
/ 12 февраля 2012

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

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

var element = $("#specificElement");
console.log(element.val());
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...