Load jquery asynchronously before other scripts

I'd like to run jQuery with async attrib and run other few external scripts asynchronously only after jquery is loaded.

What does that mean? It sounds a lot like you want to load jQuery first, then other things when it's done. So you want to load it synchronously. If you still want to use the async way, you could define an onload function to continue loading other things once jQuery is ready. Or you could use defer. Both of these are explained here: https://davidwalsh.name/html5-async


This is a great use-case for defer:

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

Neither of these tags will block rendering. The browser can download jquery.js and custom.js in parallel. It will execute jquery.js as soon as it has been downloaded and the DOM has been loaded, and custom.js will execute afterwards.

Sadly, there a few issues:

  • You can't use the defer attribute for inline scripts.
  • IE < 10 has been documented to cause scripts with defer to unexpectedly interleave their execution.
  • I can't find any specs that say that scripts with the defer order are meant to be executed in order, just that they are meant to be executed after the DOM loads.