Race Conditions:	Normal Script Src XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag
Single script:	Hardcoded Callback Window Onload Timer Script Onload Degrading Script Tags
Multiple scripts:	Managed XHR DOM Element and Doc Write
General solution:	loadScript loadScripts Same Domain loadScripts Diff Domain YUI Loader

This page contains two external scripts (menu.js and menutier.js) and some inlined code. The scripts have cascading dependencies: the inlined script depends on menutier.js, and menutier.js depends on menu.js. Because of these dependencies, if we load the scripts asynchronously, we have to preserve the execution order of the external scripts as well as the inlined script.

In this example, the external scripts are loaded from the same domain as the main page. Therefore, the Managed XHR technique can be used to load the external scripts asynchronously, and couple them with the inlined code, while preserving execution order. The external scripts are loaded using the loadScriptXhrInjection function. The init function is provided as the callback for when menutier.js is done loading.

EFWS.Script.loadScriptXhrInjection("menu.js", null, true);
EFWS.Script.loadScriptXhrInjection("menutier.js", init, true);

The implementation of loadScriptXhrInjection is just 100 lines of code. (Look at the document source to see the code.) It requests each external script using XHR. The responses are queued up and evaluated in the proper order. This technique works in all browsers and avoids the harmful blocking behavior that scripts normally exhibit. But, it only works when the scripts are on the same domain as the main page.