dom - Does the ORDER of javascript files matter, when they are all combined into one file?

Question

In todays modern age, where lots of (popular) javascripts files are loaded externally and locally, does the order in which the javascripts files are called matter especially when all local files are all combined (minified) into one file?

Furthermore, many claim that Javascript should go in the bottom of the page while others say javascript is best left in the head. Which should one do when? Thanks!

---

google cdn latest jquery js              | external
another cdn loaded javascript js         | external

TabScript  ...js          
GalleryLightbox  ...js     
JavascriptMenu  ...js       
HTMlFormsBeautifier ...js    > all minified and combined into one .js file!
TextFieldResize  ...js      /
SWFObjects  ...js          /
Tooltips ...js            /
CallFunctions   ...js    /

---

Answer 1

Order matters in possibly one or more of the following situations:

• When one of your scripts contains dependencies on another script.
• If the script is in the BODY and not the HEAD.. UPDATE: HEAD vs BODY doesn't seem to make a difference. Order matters. Period.
• When you are running code in the global namespace that requires a dependency on another script.

The best way to avoid these problems is to make sure that code in the global namespace is inside of a $(document).ready() wrapper. Code in the global namespace must be loaded in the order such that executed code must first be defined.

Checking the JavaScript error console in Firebug or Chrome Debugger can possibly tell you what is breaking in the script and let you know what needs to be modified for your new setup.

Order generally doesn't matter if functions are invoked based on events, such as pageload, clicks, nodes inserted or removed, etc. But if function calls are made outside of the events in the global namespace, that is when problems will arise. Consider this code:

JS file: mySourceContainingEvilFunctionDef.js

function evilGlobalFunctionCall() {
    alert("I will cause problems because the HTML page is trying to call " +
      "me before it knows I exist...  It doesn't know I exist, sniff :(  ");
}

HTML:

    <script>
        evilGlobalFunctionCall();  // JS Error - syntax error 
    </script>
    <!-- Takes time to load -->
    <script type="text/javascript" src="mySourceContainingEvilFunctionDef.js"></script>
...

In any case, the above tips will help prevent these types of issues.

---

As a side note, you may want to consider that there are certain speed advantages to utilizing the asynchronous nature of the browser to pull down resources. Web browsers can have up to 4 asynchronous connections open at a time, meaning that it's quite possible that your one massive script might take longer to load than that same script split up into chunks! There is also Yahoo Research that shows combining scripts produces the faster result, so results vary from one situation to another.

Since it's a balance between the time taken to open and close several HTTP connections vs the time lost in limiting yourself to a single connection instead of multiple asynchronous connections, you may need to do some testing on your end to verify what works best in your situation. It may be that the time taken to open all of the connections is offset by the fact that the browser can download all the scripts asynchronously and exceed the delays in opening/closing connections.

With that said, in most cases, combining the script will likely result in the fastest speed gains and is considered a best practice.