How are JavaScript files loaded and executed?

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?开发者_如何学C 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.

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.

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.

Adding few points over @Andy's Answer.

In Your case, script files are downloaded in parallel and parsed in the order you aligned. This is the default behaviour of a browser, Since you haven't explicitly added any of below script attributes.

Little in-depth:

HTML5 has defer and async attributes for <script> tag.

• no attribute - Your script load is going to block DOM render till it gets downloaded and parsed.

• defer - Allow the script file to download and complete the DOM render in parallel. On download complete, parse the script in order its arranged.

• async - Allow the script file to download and complete the DOM render in parallel. On download complete, parse the script immediately without waiting for other scripts.

Even <img> load is going to block the DOM render, but there is not defer/async for it. Here lazyload concept comes in to picture.