Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Difference between async and defer attributes in script tags

Lately you might have come across script tags in your html doc­u­ments with the async and/or defer attrib­utes. In this arti­cle, we will explain these terms so that you can decide when to use it in your application.

NOTE: Con­sider check­ing browser sup­port before using these fea­tures in your application.


Lets start with a reg­u­lar script tag hav­ing no attributes.

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

When the browser comes across the above line in your markup, this is what happens.

  1. Pause pars­ing the document.
  2. Make a request to fetch the file.
  3. Exe­cute the script after it has been downloaded.
  4. Resume pars­ing the document.

As you can tell, this leads to a very bad user expe­ri­ence since the browser isint really doing any­thing use­ful while the script file is down­load­ing. To avoid this, most appli­ca­tions place the script tag at the bot­tom of the html page, which is a much bet­ter way to solve this problem.

In fact, this is exactly what the async attribute is for.


Async

When you add the async attribute to your script tag, the fol­low­ing will happen.

<script src="myfile1.js" async></script>
<script src="myfile2.js" async></script>
  1. Make par­al­lel requests to fetch the files.
  2. Con­tinue pars­ing the doc­u­ment as if it was never interrupted.
  3. Exe­cute the indi­vid­ual scripts the moment the files are downloaded.

The great thing of this flow is that scripts can down­load in par­al­lel while the doc­u­ment is being parsed. But there’s a caveat to this and thats the third point — the script will be exe­cuted the moment it is down­loaded. This can be a non-issue if a script is com­pletely self con­tained. How­ever, in many sit­u­a­tions, scripts may depend on other scripts to have done some ini­tial­iza­tion before they can exe­cute. e.g. jquery plu­g­ins require the jquery vari­able to already exist on the page.

NOTE: Scripts that you pro­gram­mat­i­cally insert into the DOM are async by default, unless you explic­itly set their async attribute to false at inser­tion time.

Defer

Defer is very sim­i­lar to async with one major dif­fer­er­ence. Here’s what hap­pens when a browser encoun­ters a script with the defer attribute.

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>
  1. Make par­al­lel requests to fetch the indi­vid­ual files.
  2. Con­tinue pars­ing the doc­u­ment as if it was never interrupted.
  3. Fin­ish pars­ing the doc­u­ment even if the script files have downloaded.
  4. Exe­cute each script in the order they were encoun­tered in the document.

As you can tell, defer is pretty much what you want to do in your files. How­ever, due to lim­ited browser sup­port, its not a viable option at the time of writing.

NOTE: The async and defer attrib­utes are ignored for scripts hav­ing no src attribute.


Until we live in a bet­ter world, the good ol’ tech­nique of plac­ing scripts at the bot­tom of your doc­u­ment should work just fine for scripts that are depend­ednt on each other. As dis­cussed ear­lier, the best use case for using the async attribute in scripts is for exter­nal scripts that are com­pletely self contained.


Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.