Menu
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.
607
To execute JavaScript in a browser you have two options — either put it inside a script element anywhere inside an HTML document, or put it inside an external JavaScript file (with a . js extension) and then reference that file inside the HTML document using an empty script element with a src attribute.
The browser's built-in interpreter searches for <script> tag or . js file linked with HTML file while loading a web page, and then interpretation and execution starts. Example: In this approach, we have written JavaScript code within the HTML file itself by using the <script> tag.
The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load. Generally, JavaScript code can go inside of the document <head> section in order to keep them contained and out of the main content of your HTML document.
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.
151
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
