Are dom elements with display:none CPU-intensive?

Question

Layout

There is a web application with a list of 1500 items, styles and animations. A bunch of transition animations. If some of the elements are hidden, will it reduce the load?

Answer 1

in general, yes, it will reduce, but from the fact that they are hidden, they do not become "completely free". When redrawing, they will be processed much faster than visible elements, but they still exist in memory, and when bypassed by scripts, for example, they will be taken into account. And sim3x correctly wrote - for any brakes, see the profiler.
Quite cool - check also on a weak computer. Not all visitors to your site have top-end hardware, this is especially true for phones.

Answer 2

I advise you to load such lists gradually as you need to display (scroll the page, etc.) via AJAX.
And for those who are not in the viewport visibility zone, pause any animation / playback.
The "magnifying glass" mode should be used:
1. What is closer to the viewport, then "animate": along the perimeter of the real viewport, we take 1 viewport for preloading and prerendering (3x3 square, in the center - the real viewport).
2. What is further than this zone (3x3) - we generally delete the DOM from memory.