The 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 async
tag:
<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.
Instructions
Currently our text is pink because in our style.css file, we have a ruleset for that.
Add async
attribute to the turnBlue.js script to optimize load speed. Notice that once the turnBlue.js script is loaded, the text turns blue!