Scribd
Upload
40 views9 pages

Async Vs Defer

The document discusses the differences between using the async and defer attributes in <script> tags. Using async will load scripts asynchronously and execute them as soon as they are fetched, but not necessarily in the order defined. Defer will wait for HTML parsing to finish, load scripts in parallel, and execute them in the order defined. Both async and defer allow loading scripts without blocking HTML parsing, unlike putting scripts directly in the <head>.

Uploaded by

Santosh Khanal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views9 pages

Async Vs Defer

The document discusses the differences between using the async and defer attributes in <script> tags. Using async will load scripts asynchronously and execute them as soon as they are fetched, but not necessarily in the order defined. Defer will wait for HTML parsing to finish, load scripts in parallel, and execute them in the order defined. Both async and defer allow loading scripts without blocking HTML parsing, unlike putting scripts directly in the <head>.

Uploaded by

Santosh Khanal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

rootlearn.

com

HTML 101
async vs defer in <script> tags

root
Manish Poduval
1/8 rootlearn.com

What is it ?
We’ll understand the difference in using the async and defer
attributes in <script> tags in your HTML page
ways to load JS files

root
<script src="...."></script>

<script async src="...."></script>

<script defer src="...."></script>

Manish Poduval
2/8 rootlearn.com

<script> tag in the <head>

<html lang="en">

<head>

root
<script src="./index.js"></script>

</head>

<body>

Hey lo World!
without async or defer
</body>

</html>

parse load execute parse

Blocks HTML parsing. User would see a blank page while it


fetches the .js file

Manish Poduval
3/8 rootlearn.com

<script> at the end of <body>

<html lang="en">

<head>
without async or defer

root
</head>

<body>

Hey lo World! 

<script src="./index.js"></script>

</body>

</html>

parse load execute

Waits for HTML DOM to be created. User might have to wait


longer

Manish Poduval
4/8 rootlearn.com

using async

<html lang="en">

<head>

root
<script async src="./index.js"></script>

</head>

<body>

Hey lo World!

</body>

</html>

load
parse execute parse

Loads it as it is parsing the HTML and executes it as soon


as the script is fetched. Good for 3rd party libraries.

Manish Poduval
5/8 rootlearn.com

Caveat using async

<html lang="en">

<head>

<!-- takes 20 seconds to load -->

root
<script async src="./index1.js"></script>

<!-- takes 5 seconds to load -->

<script async src="./index2.js"></script>

</head>

<body>

Hey lo World!

</body>

</html>

load 2
load 1
parse execute 2 execute 1 parse

Scripts are not executed in order

Manish Poduval
6/8 rootlearn.com

using defer

<html lang="en">

<head>

root
<script defer src="./index.js"></script>

</head>

<body>

Hey lo World!

</body>

</html>

load
parse execute

Waits for DOM to be created. Executes script tags in the


order you’ve defined them.

Manish Poduval
7/8 rootlearn.com

multiple scripts using defer

<html lang="en">

<head>

<!-- takes 20 seconds to load -->

root
<script defer src="./index1.js"></script>

<!-- takes 5 seconds to load -->

<script defer src="./index2.js"></script>

</head>

<body>

Hey lo World!

</body>

</html>

load 2
load 1
parse execute 1 execute 2

Scripts are executed in order that you define them


Manish Poduval
bit.ly/rootlearn

Upskill yourself at Root

HTML CSS Flexbox


Lifecycle of a webpage Chéat Sheet

t
Manish Poduval

View other posts

JavaScript DNS GraphQL


Sorting: Under the hood Behind the scenes A visual introduction

1 2 3

You might also like