Can html parse before javascript async?

If the script tag for Javascript files is included in the <head> with async, is it possible for the html to load before the javascript file is done loading?
My understanding is that async allows the javascript file to load simultaneously while html is being parsed.

But is the javascript also executed once done loading? If yes, I suppose it doesn’t matter what loads first since Javascript is being executed right away.

Though I’m still interested in what is loaded first in the scenario of e.g. a very lightweight html file and a heavy javascript file.

Example:

<!DOCTYPE html> 
<html>
 
  <head>
    <link rel="stylesheet" href="style.css">
		<script id="blue" src="turnBlue.js" async></script>
  </head>
  
  <body>		
   	<p class="centered" id="logo">Codecademy</p>
  </body>
</html>

A second question based on the review text :

The old convention was to put scripts right before the </body> tag to prevent the script from blocking the rest of the HTML content. Now, the convention is to put the script tag in the <head> element and to use the defer and async attributes.

If script tags for javascript are used in the <head>, they should always contain either defer or async. Only this way can we exclude them right before the <body> tag ?

Hi Alex (@fluffyrat)

Here is an explanation by Aubrey an Advisor:

You might also be interested in:

Further explained - bitsofco

3 Likes

This topic was automatically closed after 27 hours. New replies are no longer allowed.