Why does a script at the end of the body block the page from loading?

You can do an experiment for example with setTimeout.

In this snippet if the timeout is too small the alert will appear before anything is painted on the screen, slightly bigger and the whole screen gets painted before the alert appears. It doesn't happen in bits.

<body>
  <div id="contact-us">
    <h2>Contact Us</h2>
    <p>You can contact Mr Green in various ways ...</p>
    <div class="contact-method">
      <h3>By Phone</h3>
      <p>222-222-FISH</p>
    </div>
    <div class="contact-method">
      <h3>By Email</h3>
      <p>iammrgreen@green.com</p>
    </div>
    <div class="contact-method">
      <h3>By carrier pidgeon</h3>
      <p>To do this, order your podgeon at www.mrgreenspidgeonemporium.com</p>
    </div>
  </div>

  <a href="#top">Go to top</a>
  <script>


function afterwait() {
  alert("Yo Ninja, welcome to my website!");
}
setTimeout(afterwait, 10);
</script>
</body>