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

boop
  • 6,033
  • 9
  • 37
  • 76

2 Answers2

4

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.

Constructing the Render Tree

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.

boombox
  • 2,056
  • 1
  • 9
  • 13
1

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.

ForguesR
  • 3,323
  • 1
  • 14
  • 32
  • Hmmm shouldn't the browser then try to load an image for example? http://codepen.io/anon/pen/zrrGYE This pen tries to load the image, as I can see in the dev tools. Same for this pen, where I use jQuery to add the image to the dom http://codepen.io/anon/pen/OMMVJK – boop Dec 15 '15 at 02:32
  • According to this [answer](http://stackoverflow.com/a/15346450/1980659) it shouldn't be loaded. Moreover if you use `display:none` it won't redraw or rearrange the layout. – ForguesR Dec 15 '15 at 02:39
  • Well but it is loading in chrome, ff, ie, edge and opera :| – boop Dec 15 '15 at 02:45
  • Agreed : I read the other answers in the link I provided and it looks like it is not that simple. What do you want to achieve? – ForguesR Dec 15 '15 at 02:48
  • My site loads and adds some preview images. Additionally there will be hidden elements appended to the body, which will be shown on mouse over on the preview images. I was just wondering if it would be (in theory) be better to append the html on hover instead initially. – boop Dec 15 '15 at 02:51
  • If I understand well you have the choice between "slow loading and fast hovering" and "fast loading and slow hovering". Do you think users will be mad about slow loading or slow hovering...? You might want to test both to check it out. – ForguesR Dec 15 '15 at 03:00