Влияют ли 500 элементов с одним классом на производительность, и если влияют, насколько сильно?

Question

[oncue]

Насколько сильно скажется на производительности, если я продублирую какой-нибудь элемент на странице 500 раз?

Comments

[Ярослав Иванов]

Если вы на ZX Spectrum то да

[Антон Литвиненко]

Ровно так же как 500 элементов без класса.
Конкретизируйте вопрос

[FrelFrloich]

Антон Литвиненко, Не ровно также, у каждого элемента класс, что добавляет нагрузки при рендере. Сам себя перетроллил.

[oncue]

FrelFrloich, это сильно сказывается на производительности?

[FrelFrloich]

oncue, на сильных машинах нет, на слабеньких может. Был случай, при наведении мне надо было блок который на всю страницу уменьшать и трансформом влево, при этом накладывать на него фильтр с блюром, на рабочем ноуте с 64 гигами оперативы и i7 всё великолепно, на слабом с 8гб всё тормозило что трындец.

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

[oncue]

FrelFrloich, каким образом через консоль? Я пробовал пользоваться Lighthouse в консоли, сравнивал с одним элементом и 500, разницы не было от слова совсем, одна и та же скорость.

[Андрей Корехов]

В любом браузере в инструментах разработчика есть раздел который показывает скорость загрузки элементов страницы
а вы эти 500 элементов как генерируете?
циклом от бэка или в верстке, или цепляете js скриптом по факту отрисовки страницы? От этого тоже будет результат зависеть

[oncue]

Андрей Корехов, в вёрстке. Как этот раздел называется в Chrome? Я пытался провести сравнение посредством Lighthouse.

[Андрей Корехов]

здесь полное описание , как открыть и что смотреть

[Андрей Корехов]

Но условно при загрузке 500 одинаковых элементов даже если там есть картинки, то будет мало обращений к серверу, но большой объем самой страницы.
А вот если на реальном проекте будете отрисовывать 500 однотипных элементов или хотя бы вардампить большой архив то сразу заметите проседание быстродействия