title: Why do inline scripts block rendering when put at the bottom of a page?
body: <p>I  read <a href="https://rads.stackoverflow.com/amzn/click/com/0596529309" rel="noreferrer" rel="nofollow noreferrer">High Performance Web Sites: Essential Knowledge for Front-End Engineers</a> and in it the author suggests that all JavaScript code should be externalized and put at the bottom of the page instead of putting it in the head.</p>
  
  <p>This is illustrated in <a href="http://stevesouders.com/hpws/move-scripts.php" rel="noreferrer">this example</a>. The <strong>external</strong> script tag blocks both <strong>downloading</strong> and <strong>progressive rendering</strong> of a page, so the solution was to put it at the bottom of the page.</p>
  
  <p>However, in his second book <a href="https://rads.stackoverflow.com/amzn/click/com/0596522304" rel="noreferrer" rel="nofollow noreferrer">Even Faster Web Sites: Performance Best Practices for Web Developers</a> he talks about <strong>Inline</strong> JavaScript tags.</p>
  
  <p>Inline scripts also blocks downloading and rendering of a page, so he suggests moving them also to the bottom of the page. However, this acts still blocks the rendering of the page entirely as illustrated in <a href="http://stevesouders.com/efws/inline-scripts-bottom.php" rel="noreferrer">this example</a></p>
  
  <p>Why do moving external scripts to the bottom of the page lets the page render progressively while moving inline scripts blocks rendering completely till the script is executed?</p>
  
  <hr>
  
  <p>PS:</p>
  
  <p><strong>The question isn't about why add JavaScript to the bottom of the page instead of putting them in the head. It's about why bottom inline scripts block rendering while bottom external scripts don't.</strong></p>