title: When is $(document).ready with respect to DOM tree parsing and Render tree?
body: <p>As I understand:</p>
  
  <ul>
  <li><code>$(document).ready()</code> is fired when the entire html is <strong>parsed</strong></li>
  <li><strong>scripts</strong> (inline or external) are <strong>parse-tree</strong> blocking</li>
  </ul>
  
  <p>But to my surprise the following works <strong>unexpectedly</strong>:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;h1&gt;This should show !&lt;/h1&gt;
      &lt;script&gt;
              $(document).ready(function() {
                  // Intentional infinite loop
                  for(var i=0; i&lt;100; i++) {
                      i--;
                  }
              });
      &lt;/script&gt;
      &lt;h1&gt;This should *not* show !&lt;/h1&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>On executing the above, it runs into infinite loop and with a blank screen.</p>
  
  <p>Expected to see <strong>This should show !</strong> on the screen before running into the infinite loop.</p>
  
  <p><strong>Update</strong></p>
  
  <ul>
  <li>I have created a jsfiddle <a href="http://jsfiddle.net/csgu8/" rel="nofollow">http://jsfiddle.net/csgu8/</a>  [ Infinite loop might hang your tab ]</li>
  <li>Please <strong>This is not a duplicate question</strong></li>
  </ul>
  
  <p><strong>Update2</strong></p>
  
  <ul>
  <li>Please provide citation</li>
  <li>AFAIK HTML can be partially rendered and rendering blocks only on <code>css</code> which is not used here (Comments ?)</li>
  </ul>
  
  <p><strong>Update3</strong></p>
  
  <ul>
  <li>In other words, JS is blocked in loop but what's blocking the rendering of partial DOM (already parsed) ?</li>
  <li>HTML renders incrementally, why not in this case?</li>
  </ul>
  
  <p><strong>What's going on ??</strong></p>