async attribute loads and executes the script asynchronously with the rest of the webpage. This means that, similar to the
defer attribute, the HTML parser will continue parsing the rest of the HTML as the script is downloaded in the background. However, with the
async attribute, the script will not wait until the entire page is parsed: it will execute immediately after it has been downloaded. Here is an example of the
<script src="example.js" async></script>
When is it useful?
async is useful for scripts that are independent of other scripts in order to function accordingly. Thus, if it does not matter exactly at which point the script file is executed, asynchronous loading is the most suitable option as it optimizes web page load time.
Currently our text is pink because in our style.css file, we have a ruleset for that.
async attribute to the turnBlue.js script to optimize load speed. Notice that once the turnBlue.js script is loaded, the text turns blue!