How bad will it play on performance if I hide a large block with display none?

Question

Frontend

There is this markup:

<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>

And let's also assume that there are 5-10 styles on each block, but at the same time, display: none.
It turns out that the header will not be completely included in the render tree and, therefore, resources for layout and rendering will not be spent on it.

And here's the question: maybe it's more profitable to insert an element through js when it's necessary? Or hiding large blocks through display: noneis not critical (including on mobile phones)?

Answer 1

To add / hide something through JS, you need to store it in JS. Storing something in JS is more expensive than
storing data of similar weight in HTML. In addition, when performing state synchronization with the DOM and rendering, resources are also wasted.
Write through and everyone will say "thank you" display: none;