Сколько это слишком много ID на HTML-странице?

Question

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

IМне было интересно узнать, существует ли «наилучшая практика» или известное ограничение на количество идентификаторов, которые могут присутствовать на одной html-странице в любой момент времени.

Мы могли бы потенциально получить сотни одновременно.Будет ли это раздувать браузер?

(пожалуйста, дайте мне знать, если есть лучшее место, чтобы задать этот вопрос)

Answer 1

Здесь я получаю один элемент из DOM, затем добавляю 5000 элементов с идентификаторами в DOM и затем выбираю 1000-й.Как вы можете видеть, 5000 легко для браузера, поэтому я бы сказал, что более чем достаточно для любой страницы.Не стесняйтесь играть с числами и посмотреть, где производительность начинает ухудшаться или сделать DOM более сложным, чем куча непростых участков.

let start = performance.now();
let div = document.getElementById('single');
console.log(performance.now() - start);

for (let i = 0; i < 5000; i++) {
  let span = document.createElement('span');
  span.id = 'test_' + i;
  span.innerText = i + ' ';
  document.body.appendChild(span);
}

start = performance.now();
div = document.getElementById('test_1000');
console.log(performance.now() - start);
console.log(div.innerText);

<div id="single"></div>

Я только что обновил его для работы в IE, и он все еще был меньше миллисекунды.

Answer 2

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

В режиме разработки:

<button class='login __qa-login-confirm-button'>

// Using data attribute:
<button class='login' data-qa='login-confirm-button'>

Имена классов обычно переключаются на что-то вроде большинства сред SPA.

В производстве:

<button class='ax1 vbw'> 

// Or, using data attribute, the data-qa could be stripped down in Prod:
<button class='ax1'>

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