When to use async vs defer when loading scripts?

Question

So I've recently learned that putting your js at the bottom of the DOM is antiquated, and that I should be once again putting them in the <head> with the “async” and “defer” attributes.

Great. But I'm a bit confused as to which I should use, based on priority.

So I have:

jquery
jquery plugins that don't have immediate effects on the look of the page
jquery plugins that do have immediate effects on the look of the page
my own personal scripts, which have immediate effects on the look of the page, and is also reliant on jquery

Which should get async, and which should get defer?

If I understand all this correctly, the ones that don't have an immediate effect on the look of the site should get defer, while everything else gets async. Correct? Or am I getting these mixed up.

Michał Perłakowski · Accepted Answer · 2017-06-08 19:58:24Z

26

It's quite simple. You should use [async] for scripts which can be executed in any order, and [defer] for scripts which have to be executed after HTML is parsed.

For example, if you have a script that add social sharing icons next to your posts, and this script doesn't rely on any other script, you can use both [async] and [defer]. But if your scripts requires jQuery, you can't use [async], because if you do, it might turn out that it gets executed before jQuery is loaded and it breaks.

If all your scripts require jQuery, then you shouldn't use [async] at all. As for [defer], it depends on whether your scripts access DOM. For plugins it probably doesn't matter, but you'll probably need it for your own code.

If you wrap your scripts in $(document).ready();, you can use [defer] for scripts which don't have immediate effect (e.g. require user interaction).

edited Jun 8, 2017 at 19:58

answered Jun 8, 2017 at 19:19

Michał Perłakowski

93.3k30 gold badges165 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Apoorv Over a year ago

For DOM manipulation script what should i use . defer or async?

Michał Perłakowski Over a year ago

@Apoorv You should definitely use [defer]; as for [async], it depends on whether execution order matters to you.

G_real Over a year ago

One of the best explanation so far from so many answers. Thanks @MichałPerłakowski

Neutrino Over a year ago

If you place scripts in the head don't you need to use defer in order to allow them to load without blocking the html page loading, irrespecitve of whether they need to access the DOM or not.

gabriel14 Over a year ago

According to MDN docs for the script tag using defer prevents the firing of the DOMContentLoaded event. I'm wondering what are the risks of the JS not loading or loading slowly and preventing the initial load of the page?

|

Collectives™ on Stack Overflow

When to use async vs defer when loading scripts?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related