How do I set the load and execution order of two external async Javascript files?

Given the following...

<script src="framework.js" async></script> // Larger file
<script src="scripts.js" async></script> // Small file

Though second in order scripts.js is downloading and executing before framework.js due to it's file size, but scripts.js is dependent on framework.js.

Is there a way natively to specify the load and execution order whilst still maintaining async properties?

How do I set the load and execution order of two external async Javascript files?

Given the following...

<script src="framework.js" async></script> // Larger file
<script src="scripts.js" async></script> // Small file

Though second in order scripts.js is downloading and executing before framework.js due to it's file size, but scripts.js is dependent on framework.js.

Is there a way natively to specify the load and execution order whilst still maintaining async properties?

• javascript
• asynchronous
• deferred-loading

• 1 Much better to use something like requirejs to manage your dependencies... – blockhead Commented Mar 6, 2015 at 6:41
• stackoverflow.com/questions/12893046/… – Lokesh Commented Mar 6, 2015 at 6:48

2 Answers 2

You want to use defer if you want to preserve the execution order. What defer does is it async downloads the script, but defers execution till html parsing is done.

<script src="framework.js" defer></script>
<script src="scripts.js" defer></script>

However, you may want to start creating custom bundles once the number of scripts go higher.

You can see the difference here

If you need a solution for IE9 (since it does not support the defer attribute), I have created a small loader script:

https://github.com/mudroljub/js-async-loader

It loads all your scripts asynchronously and then executes them in order.