Script Loading Issue - Ensuring Script Load Order

Question

In Web Development when working with external plugins (I'm struggling with one here), we often get the advise:

Ensure you load the scripts in the right order:

1. Script 1
2. Script 2
3. Script 3
4. ... etc

Is there an easy way a developer can confirm that his scripts are loaded in the correct order once the page has finished loading? Assuming one has the <script></script> tags added in the code in the right order.

I look at the chrome Timeline, but that is one confusing mess! I've no idea what is loaded first, what comes after it ... etc.

Any advise on this matter would greatly be appreciated.

Thank You.

• Anri: Look at 'Network' tab of development tools, not 'Timeline'
• Gohn67: There are js libraries that can help you with this. For example RequireJS or the recently popular Browserify
• Gohn67: But the scripts should load in order if you use script tags. I think it is synchronous in that case.
• Pavlo: what about 'view page source'?
• Pavlo: Sure, as an example, use this link: jsfiddle.net/VTJBc . Go to Network tab ('Clear the data') and run the fiddle, you will see the order of included files at the end of the current tab.

Answer 1

Generally, scripts are get loaded in the order they appear in code. Also you can use RequireJS library or similar to handle script dependencies.

If you are dealing with a messy multiple nested templates, or dynamic loading and can't be sure - you can use Network tab of Chrome DevTools.

Just filter it by Scripts. Lines appear in the same order they are processed.

• J86: Thanks Anri. I am using ASP.NET MVC4 and using nested Razor views/templates. I just checked in the Network tab, and even though in code I am adding the correct ordering of scripts. In Chrome, I can see that the ordering is wrong. :( I tried require, but that just gave me more errors.
• Anri: webmasters.stackexchange.com/questions/27017/…
• J86: Thanks Anri. I am now 100% sure that the scripts are loaded in the correct order, but still can't get this to work.

Answer 2

JavaScript is synchronous until we set it to asynchronous by using async attibute:

<script async src="script.js">

External plug-in which are dependent on other libraries are advised to call after that library, e.g.:

<script type="text/javascript" src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/plug-ins.js"></script>

Asynchronous scripts loading detail which can speed up your page are available at:

• https://developers.google.com/speed/docs/insights/UseAsync
• https://developers.google.com/speed/docs/insights/BlockingJS

Editors are welcome to add more information.