Сколько идентификаторов элементов может безопасно обрабатывать браузер до снижения производительности?

Question

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

Answer 1

ID сам по себе является просто значением атрибута. Единственная проблема с производительностью - это дополнительные биты и байты, которые браузер должен загрузить. Из JavaScript POV, чем больше элементов в DOM, тем больше времени потребуется для его обхода, но это не имеет прямого отношения к числу идентификаторов, которые вы можете использовать.

EDIT:

Чтобы уточнить, является ли ваш JS таким:

document.getElementById("myID")

не имеет значения, если ваш HTML выглядит так:

<div id="div1">
  <div id="div2">
    ...
      <div id="div999">
        <div id="myDiv">

или это:

<div>
  <div>
    ...
      <div>
        <div id="myDiv">

JS должен работать одинаково для обоих примеров.

Answer 2

Сложная страница требует больше байтов для загрузки, а также означает более медленный доступ к DOM в JavaScript. Это имеет значение, если вы перебираете 500 или 5000 элементов DOM на странице, когда хотите добавить обработчик событий, например.

Большое количество элементов DOM может быть признаком того, что есть что-то, что должно быть улучшено с разметкой страницы без необходимости удаления содержимого. Вы используете вложенные таблицы для разметки? Вы добавляете больше s только для того, чтобы исправить проблемы с макетом? Возможно, есть лучший и более семантически правильный способ сделать разметку.

Отличная помощь с макетами - утилиты YUI CSS: grids.css может помочь вам с общим макетом, fonts.css и reset.css помогут вам убрать форматирование настроек браузера по умолчанию. Это шанс начать все сначала и подумать о вашей разметке, например, использовать s только тогда, когда это имеет смысл семантически, а не потому, что оно отображает новую строку.

Количество элементов DOM легко проверить, просто наберите в консоли Firebug: document.getElementsByTagName ('*'). длина

Answer 3

У нас есть форма с более чем 1000 полями (не спрашивайте), использующая jQuery Validate для проверки на стороне клиента. Это включает в себя проверку того, какие поля являются обязательными, проверку типа данных каждого поля, отображение / скрытие групп полей на основе определенных критериев и выполнение вычислений для нескольких полей при вводе данных.

Только MSIE замедляется в этом масштабе. Firefox и Chrome запускают проверку «мгновенно». MSIE в конце концов показывает диалог «долго выполняющийся скрипт». Вчера вечером мне сообщили, что теперь требуются дополнительные поля.