Does ORDER mean javascript files when they are all merged into a single file?

Question

In the modern era, where many (popular) javascripts files are downloaded externally and locally, does the order in which javascripts files are called , especially when all local files are combined (minified) into one file?

In addition, many argue that Javascript should go to the bottom of the page , while others say that javascript is best left in the head. What to do when? Thank!

---

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 issues in perhaps one or more of the following situations:

• When one of your scripts contains dependencies on another script.
• If the script is in BODY and not in HEAD. . UPDATE: HEAD vs BODY does not seem to matter. Questions for the order. Period.
• When you run code in a global namespace that requires a dependency on another script.

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

Checking the JavaScript error console in Firebug or the Chrome debugger can tell you what is happening in the script and tell you what needs to be changed for your new setting.

An order does not matter at all whether functions are called based on events such as pageload, clicks, inserted or deleted nodes, etc. But if function calls are made outside of events in the global namespace, that is, when problems 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 problems.

---

As an additional note, you might think that there are certain advantages to the speed of using the asynchronous nature of the browser to draw resources. Web browsers can open up to 4 asynchronous connections at the same time, which means that it is entirely possible that your one massive script may take longer than the same script being broken into pieces ! There is also Yahoo Research , which shows that a combination of scripts gives a faster result, so the results vary from one situation to another.

Since this is a balance between the time taken to open and close several HTTP connections and the time taken to limit one connection instead of several asynchronous connections, you may need to do some testing at your end to see what works best in your situation . Perhaps the time taken to open all connections is compensated by the fact that the browser can load all scripts asynchronously and exceed the delay when opening / closing connections.

With that said, in most cases combining a script is likely to lead to a quick increase in speed and is considered best practice.

Answer 2

Yes, depending on what you do.

For example, if a.js has ...

 var a = function() { alert('a'); } 

... and b.js had ...

 a() 

... then you would not want to include b.js until a.js , or a() would not be available.

This applies only to function expressions; ads go up at the top of their area.

As for whether you should combine jQuery, I think it’s better to use a copy hosted by Google - adding it to your combined file will make it bigger if there is a big chance that the file is already cached for the client.

Answer 3

Read this post from the webkit team for valuable information on how the browser downloads and executes script files.

Usually, when the parser encounters an external script, parsing is paused, a request is issued to load the script, and parsing resumes only after the script has been fully loaded and executed .

Thus, usually (without these asynchronous or pending attributes) scripts get excuted in the order in which they are specified in the source code. But , if the script tags are in <head> , the browser first waits until all the scripts load before it starts execution .

This means that it doesn't matter if the script is split into multiple files or not.

Answer 4

If I understand your question, I think you are asking if it matters where the function / method is defined in the file, and the answer is no, you can define them anywhere in the same source file. The JavaScript parser will read all characters before trying to run the code.

Answer 5

If you have two files that define variables or functions with the same name, then the order in which they are included will change the one that is actually defined