Script Execution: Normal, Asynchronous, and Deferred
Loading several JavaScript files on a page, as this will interfere with the time to first paint even if the document is not actually dependent on those files.
Fortunately, the <script> element has two attributes, async and defer, that can give us more control over how and when external files are fetched and executed.
Let's explore it one by one...
Normal Execution
By default, JavaScript files will interrupt the parsing of the HTML document in order for them to be fetched (if not inline) and executed.
Take, for example, this script element located somewhere in the middle of the page -
<html>
<head> ... </head>
<body>
...
<script src="script.js">
....
</body>
</html>The HTML parsing is paused for the script to be fetched and executed, thereby extending the amount of time it takes to get to the first paint.
The async Attribute
The async attribute is used to indicate to the browser that the script file can be executed asynchronously. The HTML parser does not need to pause at the point it reaches the script tag to fetch and execute, the execution can happen whenever the script becomes ready after being fetched in parallel with the document parsing.
<script async src="script.js">This attribute is only available for externally located script files. When an external script has this attribute, the file can be downloaded while the HTML document is still parsing. Once it has been downloaded, the parsing is paused for the script to be executed.
The defer Attribute
The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.
<script defer src="script.js">Like an asynchronously loaded script, the file can be downloaded while the HTML document is still parsing. However, even if the file is fully downloaded long before the document is finished parsing, the script is not executed until the parsing is complete.
