If I add an alert in the page head the alert shows up normally and after clicking on OK the website loads, but when I move the alert into the end of the body element the webpage (according to YT videos) should load immediately but it doesn't. It still waiting on me on clicking "OK".
So where I did mistake?
<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>
alert("Yo Ninja, welcome to my website!");
</script>
</body>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>