Максимальное количество идентификаторов элементов на странице?

возникли проблемы с поиском на этом. Единственное, что я нашел до сих пор, было связано с API отображения, где (для маркеров карт) JavaScript плохо болтается вокруг 500 идентификаторов. Я уверен, что это было связано с конкретными используемыми сценариями, а не с общим правилом.

У меня есть страница со сложным списком. Каждый элемент в списке имеет около 10 различных идентификаторов на нем, и есть несколько сценариев JavaScript в игре. Список разбивается на страницы, и у пользователя есть выбор, сколько элементов для отображения на странице. Учитывая, что каждый элемент в списке имеет ~10 идентификаторов, мне интересно, что я должен установить максимальное количество элементов на странице (общее количество записей, которые пользователь может выбрать для просмотра одновременно на странице).

Я имею в виду - помимо увеличения времени загрузки на основе необработанного количества записей, есть ли известное количество идентификаторов, где предел поражен или где производительность CSS/JavaScript начинает резко ухудшаться?

Edit: Pardon, каждый "элемент" - сложный бизнес карта (для рисования картины) с тремя дивами в игре и небольшой формой. Вот почему каждый элемент (запись) имеет около 10 идентификаторов.

7
css dom html javascript performance

2 ответов

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

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

но учитывая количество высоко графических javascript-материалов, происходящих с HTML5, ect., Я бы поспорил, что вам понадобится смешное количество данных для отображения производительности javascript, чтобы быть вашей самой большой точкой прилипания (по крайней мере, в самых современных браузерах, если вам нужно поддерживать что-то вроде IE6, все ставки отключены).

закрыл скобки, извините за Вилли-дающий

4

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

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

<div id="card-1" onclick="doSomethingWithCard('card-1')">
   <h2 id="card-1-name">John Doe</h2>
</div>

оба идентификатора здесь могут быть ненужными. Многие люди пытаются получить ссылку на элемент, который вызвал событие, передав его ID в обработчик событий и с помощью getElementById. Вместо this уже содержит ссылку: 

<div onclick="doSomethingWithCard(this)">
   ...
</div>

и как только у вас есть эта ссылка, вы можете использовать getElementsbyTagName, селектор CSS (обычно с JavaScript Framework/Library как jQuery) или XPath для доступа к элементам внутри вместо их отдельных идентификаторов. Это работает лучше всего, если все элементы имеют одинаковую внутреннюю структуру, используя соответствующие элементы (h2, h3, ul, form и т. д.) и занятия.

пример jQuery:

function doSomethingWithCard(card) {
   alert($(card).find("h2").text());
}
4