Насколько плохо сыграет это на производительности, если я скрою большой блок через display none?

Question

[djEban]

Есть такая разметка:

<header class="header">
			<nav class="nav">
				<div class="link">
					<div class="link__content">Content</div>
				</div>
				<div class="link">
					<div class="link__content">Content</div>
				</div>
				<div class="link">
					<div class="link__content">Content</div>
				</div>
				<div class="link">
					<div class="link__content">Content</div>
				</div>
			</nav>
		</header>

И предположим еще, что на каждом блоке по 5-10 стилей, но при этом на хедере весит display: none.
Получается, что хедер целиком не попадет в render tree и следовательно на него не будут тратиться ресурсы для компоновки и отрисовки.

И вот вопрос: а может выгоднее вставить элемент через js, когда надо будет? Или скрывать большие блоки через display: none - это не критично (в том числе и на мобилках)?

Comments

[Андрей Федоров]

мне кажется у вас браузер вначале срендерит все как есть, а потом применит стили. причем начнет со стилей с самой глубокой вложенностью и только в конце дойдет до стилей уровня .header.

[djEban]

Андрей Федоров, ну он максимум потратит больше времени на парсинг хтмл/css, но в рендер-три же не попадет хедер с его дочерними элементами, так как дисплей нан. Разве не так? И следовательно не будет вычислять размеры/положение элемента и тому прочее
Может я не так понимаю принцип работы? Только изучаю