Нагружают ли процессор dom элементы с display:none?

Question

[Даниил Иванов]

Существует веб приложение со списком в 1500 элементов, стилями и анимацией. Куча transition анимации. Если часть элементов будет скрыто, это уменьшит нагрузку?

Comments

[sim3x]

Смотрите в профайлер хрома

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

Answer 1

[Stalker_RED]

вообще да, уменьшит, но от того что они скрыты, они не становятся "совсем бесплатными". При перерисовке они будут обработаны намного быстрее чем видимые элементы, но в памяти они все равно есть, и при обходе скриптами, например, они будут учитываться. И sim3x правильно написал - при любых тормозах смотрите профайлер.

Совсем круто - проверять еще и на слабом компе. Не у всех посетителей вашего сайта топовое железо, особенно сильно это телефонов касается.

Answer 2

[xmoonlight]

Советую подобные списки подгружать постепенно по мере необходимости отображения (скролла страницы и т.д.) через AJAX.
А для тех, которых нет в зоне видимости viewport - ставить любую анимацию/воспроизведение на паузу.

Режим "лупы" нужно использовать:
1. Что ближе к viewport-у, то "оживляем": по периметру реального viewport-а берём 1 viewport для предзагрузки и пререндеринга (квадрат 3x3, в центре - реальный viewport).
2. Что дальше этой зоны (3x3) - вообще удаляем из памяти DOM.