Will the browser parse / pre-render / paint display:none HTML?

Question

I want to prevent the browser from doing the work to parse and pre-render or paint some \"hidden\" HTML until I\'m ready to show it, so that I can quickly display a minimal

Answer 1

display: none will not prevent the browser from parsing/loading that markup and associated resources (EDIT by Steven Moseley: tested this and found that display:none will actually prevent the browser from painting the HTML, i.e. applying CSS to the elements inside the hidden div, and will only do the work to parse the HTML to construct the DOM, which will in fact give a performance advantage). It is simply not rendered as part of the page flow until its display value changes. Generally speaking display: none and visibility: hidden have little or no impact on page load time. The main venue for optimization / performance with display: none involves selectively choosing when to display it since that triggers a reflow/rerender of page content, and even that is usually a negligible difference in all but very complex applications.

If you want to wait to load the content until it's needed, don't include it at all (or include empty div placeholders) and then use AJAX to fetch the content from the server once it's needed after page load and add it to the page with JS. jQuery makes this very simple with its built in AJAX functions.

Answer 2

Can you avoid building the invisible HTML in the first place? Are you going to at some point set .invisible { display: block }?.

I've found display: none isn't as wonderful for performance as you'd expect. You're better off only adding the extra elements to the screen when your user needs them, with infinite scrolling or pagination.

Try and avoid putting HTML into the page if it's not going to be viewed, and just add what you need in 1 go to minimize DOM manipulation.

Is it likely a user will look at all 50 items per page?