DEV Community

Discussion on: When to use async and defer attributes in a script tag and why it is important

View post
Collapse
 
rohan2734 profile image
rohan2734 • • Edited

I have read the whole blog, but you have not mentioned how to add a async or defer attrubute to a script tag..
Do we need to add it like this?

<script src="index.js" async ></script>
<script src="index.js" async ></script>
Enter fullscreen mode Exit fullscreen mode

or

<script src="index.js" defer></script>
<script src="index.js" defer></script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
myogeshchavan97 profile image
Yogesh Chavan • • Edited

Hi Rohan, It depends on what you want to achieve.

  • If your scripts are not dependent on each other then you can place them before the end of body tag and mark them as async like this: 
<body>
.
.
.
<script src="index.js" async></script>
<script src="script.js" async></script>
</body>
Enter fullscreen mode Exit fullscreen mode
  • If you want to include the scripts in the head tag and the order of scripts is important then mark then as defer like this: 
<head>
.
.
<script src="index.js" defer></script>
<script src="script.js" defer></script>
</head>
Enter fullscreen mode Exit fullscreen mode

I hope this clears your doubt now 🙂

Collapse
 
rohan2734 profile image
rohan2734 •

ya thankyou sir.