title: JavaScript script loading sequence
body: <p>I got reference of this image
  <a href="https://i.stack.imgur.com/wfL82.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wfL82.png" alt="script loading"></a></p>
  
  <p>But in following scenario even if the JavaScript is at the bottom of the html file its downloaded and parsed first and then the HTML is shown, I am a bit confused - </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;JavaScript Loader Sequence&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="style/style1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;HTML parse and render&lt;/p&gt;
      &lt;img style="max-width: 70%; height: auto; border: 1px solid red;" src="https://i.stack.imgur.com/wfL82.png"&gt;
      &lt;p&gt;
          There ain't no grave can hold my body down
          There ain't no grave can hold my body down
          When I hear that trumpet sound I'm gonna rise right out of the ground
          Ain't no grave can hold my body down
      &lt;/p&gt;
  &lt;/body&gt;
  &lt;script type="text/javascript"&gt;
      alert('Last Appearance');
      setTimeout(function(){ alert('Last appearance 5000 ms') }, 5000);
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>