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 set of content, having the browser only do the work the render the visible pieces.

I'm looking for maximum render/paint speed of initial page load.

My current HTML:

<div id="stuff">
    <div class="item">
        <div class="visible">
            <h1>Item 1</h1>
            <a class="details" href="javascript:void(0)">Show more</a>
        </div>
        <div class="invisible">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit mi, bibendum a imperdiet sed, imperdiet id leo. Mauris vulputate tellus id metus euismod, eget gravida libero ultricies.</p>
            <img src="/img/1.jpg" alt="" />
        </div>
    </div>
    <div class="item">
        <div class="visible">
            <h1>Item 2</h1>
            <a class="details" href="javascript:void(0)">Show more</a>
        </div>
        <div class="invisible">
            <p>Vestibulum tristique fermentum dui, et pretium elit. Ut purus lacus, mattis vitae leo vel, congue mollis mi. Aliquam erat volutpat. Vestibulum luctus, purus ut mattis ullamcorper, justo odio ultrices dolor, nec porta purus turpis sed orci. Aliquam orci sapien, dictum sed facilisis molestie, tempus in orci.</p>
            <img src="/img/2.jpg" alt="" />
        </div>
    </div>

    ... and so on...
</div>

The actual "invisible" content is MUCH more significant than in this example, and there are 50 "items" per page.

My external CSS:

.invisible {
    display: none;
}

Will display: none in an external stylesheet prevent the browser from pre-rendering the hidden content?

Is there a better way to do what I want? Should I put an inline style="display:none" on the div instead?

Thanks!

Answer 1

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?

Answer 2

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.