Сколько тегов div слишком много?

Question

Сколько тегов div в одном HTML-документе потребуется, прежде чем это повлияет на производительность? В этом случае теги не являются вложенными, и содержимое каждого из них является минимальным (цвет фона / изображение).

Этот вопрос является продолжением предыдущего вопроса; Рисование линий с помощью интерактивных точек с использованием JavaScript

Здесь я остановился на этом с использованием HTML и CSS.

Теги <div> будут иметь ширину не менее 4 пикселей и общую ширину 400-800 пикселей, таким образом теги 100-200 div.

Кроме того, пять или шесть графиков / временных шкал будут накладываться друг на друга. Количество тегов div увеличивается до 500-1200.

Опять же, учитывая, что в каждом из них мало контента, как это повлияет на производительность?

_L

Answer 1

Проверьте и узнайте. Это будет сильно отличаться от механизма рендеринга, чтобы ответить вообще.

Answer 2

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

Что меня беспокоит, так это функции javascript, которые могут быть у вас при попытке пройти DOM. Просмотр всех этих элементов может быть дорогостоящей операцией для клиента. Хотя, опять же, правильный бенчмаркинг не может быть заменен.

Answer 3

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

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

Answer 4

Ответ зависит от лота вещей. Каждый тег div имеет небольшое влияние на производительность. Переломный момент, когда производительность начнет быстро падать, будет зависеть от браузера и компьютера, просматривающего страницу.

Также важно, какие правила CSS влияют на эти стили. Условно говоря, некоторые CSS-селекторы выполняются быстро, а некоторые - медленно. Если у вас определены некоторые медленные селекторы CSS, ваш переломный момент наступит гораздо раньше, если вы не используете CSS или используете только быстрые селекторы CSS. Аддон Google PageSpeed ​​может дать вам представление о том, используете ли вы медленные селекторы CSS.

Кроме того, если вы делаете такие вещи, как анимация их как системы частиц, ваш переломный момент наступит еще быстрее.

Answer 5

Если это что-то вроде <font> тегов, то ответ, казалось бы, миллионы! Проверить: http://www.fujinonbinos.com/ (сделать Просмотр источника - серьезно!)

Серьезно, однако, сводить вещи к минимуму - это всегда хорошая практика как для удобочитаемости (сопровождение кода), так и для скорости. Тем не менее, это вряд ли окажет серьезное влияние, если это не смешно. Даже приведенный выше пример не такой медленный!