How are JavaScript files loaded and executed?

javascript execution
Tower picture Tower · Mar 6, 2010 · Viewed 12.8k times · Source

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

Andy E picture Andy E · Mar 6, 2010

Scripts are downloaded in parallel, but parsed and executed in the order they appear in the HTML, blocking other actions on the page (including 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.

Related questions

How to force Sequential Javascript Execution?

I've only found rather complicated answers involving classes, event handlers and callbacks (which seem to me to be a somewhat sledgehammer approach). I think callbacks may be useful but I cant seem to apply these in the simplest context. See …

Read More
How does Asynchronous Javascript Execution happen? and when not to use return statement?

// synchronous Javascript var result = db.get('select * from table1'); console.log('I am syncronous'); // asynchronous Javascript db.get('select * from table1', function(result){ // do something with the result }); console.log('I am asynchronous') I know in synchronous code, …

Read More
Prevent JavaScript function from running twice (setTimeout)

I have this function that runs for several seconds with the use of setTimeout. This function is ran when a button is clicked. function complete() { var div = document.getElementById('log'); setTimeout(function(){ div.innerHTML = div.innerHTML + intro[Math.floor(Math.…

Read More