Using async and defer to load scripts in order

Question

So, I'm following the Google PageSpeed recommendation to defer above-the-fold scripts. Let's say this is the code in my <head>:

<script src="/js/jquery.js"></script>
<script src="/js/functions.js"></script>

The functions.js script depends on jQuery so it's crucial that jquery.js is loaded and executed before functions.js.

What I tried:

defer

<script src="/js/jquery.js" defer></script>
<script src="/js/functions.js" defer></script>

While this works and functions.js gets executed properly, when I load the page I see it flicker, as if the CSS is not yet loaded. Note that the above code is in the <head>. If I remove the defer attribute from jquery.js, the flickering disappears. That leads me to my question:

Mixed

<script src="/js/jquery.js" async></script>
<script src="/js/functions.js" defer></script>

Does using async on the dependency script and defer on the dependent script ensure they will always be executed in that order? It seems to work in my tests but I don't know enough about how the parser works in order to be sure.

Flimm · Accepted Answer · 2018-11-13 05:29:32Z

5

The answer is that you lose guarantees about the order scripts are executed if you use async or defer.

async scripts are executed asyncronously, there are no guarantees as to which order there are. defer scripts are executed after the document has been parsed, but there are no guarantees as to whether they will be executed in order. (Have a look at this question about defer scripts specifically.)

Unfortunately, in your case, you have to run jquery.js synchronously by removing the defer and async attributes.

Looking forward, as we move to modules, specifying dependencies and loading them just in time (and only once) will be made much easier.

answered Nov 13, 2018 at 5:29

Flimm

154k49 gold badges282 silver badges295 bronze badges

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

2 Comments

Johny P. Over a year ago

I haven't looked into modules yet. Perhaps in my next project I will check what the ECMAScript Standard says.

CertainPerformance Over a year ago

There's no need to block with a synchronous script if one doesn't want to - load the script with async or defer, listen for its load event, and once that fires, create another <script> that depends on the previous one, and so on.

cquezel · Accepted Answer · 2018-12-17 21:13:33Z

4

Although I'm not sure how current browsers implement the standard, there are minimal guarantees about execution order of scripts (classic script elements without type="module") and modules (script elements with type=module).

1) Classic scripts which do not specify defer or async are executed in the order they appear in the html document (when the document is being parsed). They are executed before classic scripts that are defer and modules that are not async.

2) classic scripts that are defer and modules that are not async are executed in the order they appear in the html document (after the document has been parsed).

See point 20 on the processing model here: https://www.w3.org/TR/html5/semantics-scripting.html#script-processing-model

edited Dec 17, 2018 at 21:13

answered Dec 14, 2018 at 23:25

cquezel

4,5451 gold badge34 silver badges36 bronze badges

Comments

Momen Zalabany · Accepted Answer · 2017-11-26 10:46:51Z

0

Yes on chrome, sometimes on Firefox..

Specs say they will be loaded in order, but loaded mean downloaded not executed so if file finishes downloading before other it will run first so i wouldn't recommend you depend on order of execution using defer or async attributes

answered Nov 26, 2017 at 10:46

Momen Zalabany

9,03616 gold badges81 silver badges144 bronze badges

Collectives™ on Stack Overflow

Using async and defer to load scripts in order

What I tried:

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

What I tried:

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related