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.

--

--

Developer with 3 yrs of industrial experience in developing scalable web applications.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhay Jain

Developer with 3 yrs of industrial experience in developing scalable web applications.