How are JavaScript files loaded and executed?

Question

Hi,

I don't often see talk or research on JavaScript file loading/executing order. I'm interested in sites explaining how JavaScript is being handled. In particular, if I have

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

I presume a.js is downloaded first, then b.js and finally c.js or are they being downloaded concurrently? What about execution? Are scripts in the header preferred over ones in the body?

The main reason why I'm so interested in this topic is because I'm writing a JavaScript software that uses dynamic loading of these scripts and sometimes I get errors like x is undefined (it hasn't been loaded before other scripts), but usually those errors won't occur. I don't understand why.

Answer 1

Scripts are downloaded, parsed and executed in the order they appear in the HTML, blocking other actions on the page (including HTML rendering) until they have executed. It is possible for scripts to be non-blocking, if they are added by JavaScript code via the DOM for instance, or if the async attribute is present in the latest versions of Firefox.

Answer 2

What controls the JavaScript download is mainly your browser. If you load them all from the same domain, like you are doing above, they will be loaded one after the other, therefore loaded on the order you specify.

As a simple test, you can simply try specifying functions on each of the files and trying to call them from the next file on the list, so you can see the order they load.

In regards to the precedence of loading, most website optimization books will tell you to load your js files at the very bottom, as this will make your page load faster, and the js fIle will be loaded as the last resource necessary. This needs to be done with care, if your pages rely on the JavaScript directly upon loading, you might end up with endless js errors.

Libraries such as jquery will help a lot with that, as they will only let the js action happen, once the DOM is available, hence no js errors when js is loaded at the bottom of the HTML.

Another interesting thing to do, is make sure you keep your js files properly minified, and stick to q minimum of files, as doing so, you're only doing a few server requests, and I'll have your JavaScript readily available in less time.

Hope this helps you.

Answer 3

Some good reads on the subject:

http://www.stevesouders.com/blog/2010/02/07/browser-script-loading-roundup/

http://www.stevesouders.com/blog/2009/05/06/positioning-inline-scripts/

http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

and a good non-blocking solution: http://labjs.com/