title: Will the browser parse / pre-render / paint display:none HTML?
body: <p>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.</p>
  
  <p><strong>I'm looking for maximum render/paint speed of initial page load.</strong></p>
  
  <p>My current HTML:</p>
  
  <pre><code>&lt;div id="stuff"&gt;
      &lt;div class="item"&gt;
          &lt;div class="visible"&gt;
              &lt;h1&gt;Item 1&lt;/h1&gt;
              &lt;a class="details" href="javascript:void(0)"&gt;Show more&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="invisible"&gt;
              &lt;p&gt;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.&lt;/p&gt;
              &lt;img src="/img/1.jpg" alt="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
          &lt;div class="visible"&gt;
              &lt;h1&gt;Item 2&lt;/h1&gt;
              &lt;a class="details" href="javascript:void(0)"&gt;Show more&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="invisible"&gt;
              &lt;p&gt;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.&lt;/p&gt;
              &lt;img src="/img/2.jpg" alt="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      ... and so on...
  &lt;/div&gt;
  </code></pre>
  
  <p>The actual "invisible" content is MUCH more significant than in this example, and there are 50 "items" per page.</p>
  
  <p>My external CSS:</p>
  
  <pre><code>.invisible {
      display: none;
  }
  </code></pre>
  
  <p>Will <code>display: none</code> in an external stylesheet prevent the browser from pre-rendering the hidden content? </p>
  
  <p>Is there a better way to do what I want?  Should I put an inline style="display:none" on the div instead?</p>
  
  <p>Thanks!</p>