This page contains an external script and some inlined code.
The external script is loaded asynchronously (using the Script DOM Element technique).
The inlined code's init function calls scriptAFunc, a function defined in the external script.
Because of this dependency, the inlined code must be coupled with the external script so that
the execution order is preserved: the external script is loaded, parsed, and executed before the inlined code.
In this example, the scripts are loaded in the normal way:
<script src="A.js" type="text/javascript"></script> <script src="B.js" type="text/javascript"></script>External scripts block other downloads making the page load more slowly. Notice how script B doesn't finish executing until 6 seconds (6000+ ms) have passed. That's because A took 4 seconds to return and B took 2 seconds to return before B could be executed. External scripts also block any elements below them in the page from rendering. Notice how the table above started drawing immediately, but this paragraph of text doesn't appear for about 6 seconds. That's because the external scripts appear in the HTML document between the table and this paragraph.
Some newer browsers, currently IE8 and Safari 4, load these scripts in parallel. But in some cases other types of resources (images, stylesheets, etc.) and rendering are still blocked. Also, we still have the legacy browsers to deal with for at least a year or two. Luckily, there are advanced techniques for loading scripts that avoid this blocking behavior. Use the other examples above to see how these techniques perform.