DEV Community

loading...
Cover image for Async vs Defer attribute

Async vs Defer attribute

rahxuls profile image Rahul ・2 min read

I'm back after a 20 days without any blogs. Will be posting about what I did in these 20 days. So here's my new post about async vs defer attribute in JavaScript. Let's go.

When you load a webpage then there are two major things happening in your browsers:

  • HTML Parsing
  • Loading of the scripts

Loading of the scripts contain two parts:

  • Fetching the script from the network.
  • Executing the script line by line.

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.

async and defer are boolean attributes that are used along with the <script> tag to load the external scripts efficiently into your webpage.


Normal <script> tag

<html>
 <head>...</head>
 <body>
   ...
   <script src="main.js">
   ...
 </body>
</html>    
Enter fullscreen mode Exit fullscreen mode

Suppose your browser is parsing the HTML and then it encounters the <script> tag.


Normal <script> tag

In the case of the normal <script> tag following steps takes place:

  • JS blocks the parsing of HTML
  • Fetches the script from the network
  • Executes the script
  • HTML parsing is started only after the script is fully executed

The async attribute

The async attribute is used to indicate to the browser that the script file can be executed asynchronously.

<script async src="main.js">

  • While using the async attribute, meanwhile, the HTML parsing is going on, any of the script with the async attribute is fetched from the network asynchronously along with the HTML parsing.

The async attribute

As soon as scripts are fetched and available in the network, HTML parsing stops and scripts start executing.

Once the scripts are executed, the HTML parsing continues like regular.


The defer attribute

<script defer src="script.js">

The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.

The defer attribute

In this case:

  • HTML parsing goes on and scripts are fetched in parallel
  • Scripts are only executed once the HTML parsing is complete.

This blog was originally posted at => [https://rahulism.tech/article/async-vs-defer-in-JS/]


😎Thanks For Reading | Happy Coding😃



Discussion (7)

pic
Editor guide
Collapse
ericbutler555 profile image
Eric Butler

Nice reminder. I've never been sure what a smart use-case is for async, it seems like defer is almost always the more appropriate choice on a webpage so the HTML can finish parsing before any JS executes.

Collapse
jamesta696 profile image
Jamie Smith

I've never come across a use-case where I'd use async :p

Collapse
pris_stratton profile image
pris stratton

Great article. Does defer remove the need to use the document load / onload event to only run some code when the doc is fully loaded?

Collapse
ericbutler555 profile image
Eric Butler

No - with defer, the script will wait for the browser to finish parsing the HTML into a DOM tree, but will not wait for all of the page's assets (like images, css, 3rd-party files, etc.) to finish loading. Often you don't need to wait quite so long as the load event before your JS can start doing things like DOM manipulation (hiding an element, etc.), adding event listeners, etc., you just need the DOM to be set up. But if you do need to wait for load, you can use defer on the script tag but you still need to wrap your code in a window.addEventListener('load') event.

Collapse
pris_stratton profile image
pris stratton

That makes sense. Thank you!

Collapse
jamesta696 profile image
Jamie Smith

Good article :D

Collapse
rahxuls profile image
Rahul Author

Thanks Man!