When will a browser parse elements which are hidden?

Question

<div style="display: none;">foo</div>

I'm thinking about bloating my DOM a bit for some (lazy probably) reasons with content which is hidden.

Now I'm wondering if this would actually affect performance so my question is: when will a browser (talking about recent browser) parse hidden content? When it get added to the DOM? Or when it get actually visible?

I'm asking explicit for the content of the div, since the container has to be parsed - otherwise the browser couldn't know its hidden, right? ;)

I'm asking this for all modern browser, since I think that all modern browsers will handle this in the same way.

Oh and maybe I should add that I'll add these hidden content per JS.

Answer 1

Browsers follow something called the Render Tree which is formed by combining the DOM and CSSOM trees. In short, the DOM is concerned about content, while CSSOM is focused on styles applied to the document. The resulting "Render Tree" contains only the visible elements required to render the page.

Elements that are not visible or hidden via CSS aka via display: none will not be included in the Render Tree, while all elements that affect the layout will be included. So, it's safe to assume that your example will not get rendered until it becomes visible or affects the layout of the document in some way.

After the Render Tree is constructed, it goes through a layout and paint cycle. The layout cycle calculates the position of each element in the Render Tree, and then the paint cycle displays each element onto the screen.

For more information about the Render Tree, see Critical Rendering Path described on the Google Developers' web fundamentals resource.

Answer 2

The JS adding the divs in the DOM will probably cause more overhead than the browser parsing it.

Hidden elements with display:none are no different than visible elements and do not affect performance positively or negatively because there will be no effect on the layout. On the other hand, if you use visiblity:hidden then the browser must reserve a "box" for it and this will be slower because it affects the layout.