Script Loading Techniques

Few years back when JavaScript was only used as functions, the best practice was to just combine all your JavaScript and load from an external source. These few years, JavaScript is often used as framework that create sites with heavy front-end scripting. To simply load everything once isn't a one fit for all solution anymore. This article talks about some basic script loading techniques and coupling technique.

Attribution “Even Faster Web Sites, by Steve Souders. Copyright 2009 Steve Souders, 978-0-596-52230-8.”

##Script Loading Normally, most browsers download components in parallel, but that’s not the case for external scripts. When the browser starts downloading an external script, it won’t start any additional downloads until the script has been completely downloaded, parsed, and executed.

###Normal Script Src The nice thing about loading the external script the normal way is that execution order is preserved across all browsers. The external script is downloaded, parsed, and executed. After that, the inlined code is parsed and executed. There are no race conditions. Demo

###XHR Eval This technique loads scripts in parallel, but it doesn't preserve execution order. Therefore, the inlined code is executed before the external script finishes downloading. This results in an undefined symbol error because the inlined code references EFWS, which isn't yet defined. Demo

###XHR Injection When the response is received, it's injected into the page by setting the text of a dynamically created script element. This technique loads scripts in parallel, but it doesn't preserve execution order. Demo

###Script in Iframe The script is loaded via an iframe. The external script's code is put inside an HTML document, and that HTML document is loaded as an iframe. This succeeds in loading the scripts in parallel, but, similar to the XHR techniques, execution order is not preserved. Therefore, the inlined code is executed before the external script finishes downloading. Demo

###Script DOM Element This technique succeeds in loading the scripts in parallel across all major browsers, but the execution order is preserved only in Firefox and Opera. In other browsers, an undefined symbol error cocurs because the inlined code references EFWS, which isn't yet defined. Demo

###Script Defer The DEFER attribute is part of the HTML 4 specification, but it is only supported in IE, and even there execution order is not preserved, resulting in undefined symbol errors. In other browsers, it will have no effect and the external script will still block downloads and rendering in the page. Demo

###document.write Script Tag This technique successfully loads scripts in parallel in IE, Safari 4, and Opera, and it preserves execution order. But it has some drawbacks. Although scripts are loaded in parallel, in IE and Opera other types of resources (images, stylesheets, etc.) are blocked from downloading, elements in the page below the scripts are blocked from rendering, and it doesn't preserve execution order. Demo

##Coupling When you use race conditions with inline script, there might be a problem. This technique loads scripts in parallel, but it doesn't preserve execution order. Therefore, the inlined code is executed before the external script finishes downloading. This results in an undefined symbol error because the inlined code references to the objects defined in external script, which aren't yet defined. Below are some of the coupling techniques:

###Script Onload This works across browsers. It causes the inlined code to be invoked as soon as possible after the external script is done loading. It has minimal overhead. Demo