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

Question

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

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

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

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

Answer 1

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

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

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

Оба идентификатора здесь могут быть ненужными.Многие люди пытаются получить ссылку на элемент, который вызвал событие, передав его идентификатор обработчику события и используя 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());
}

Answer 2

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

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

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

Закрыл круглые скобки, извините за дачу Вилли