Where to add asynchronous scripts in javascript
<p>I want to load a non-blocking javascript on my page. Before <code>async</code> is supported, the best practice seems to dynamically load it via a simple script.</p>

<p>Here is an example that works fine in which it is inserted before the first <code>&lt;script&gt;</code>:</p>

<pre><code>var myscript = document.createElement('script');
myscript.async = true; // cannot hurt, right?
myscript.type = 'text/javascript';
myscript.src = 'myscript.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(myscript, node);
</code></pre>

<p>I found several versions inserting the script in different places like the end of <code>&lt;head&gt;</code> or the <code>&lt;body&gt;</code>:</p>

<pre><code>document.getElementsByTagName("head")[0].appendChild(myscript);  
document.getElementsByTagName("body")[0].appendChild(myscript);
</code></pre>

<p>The order seems to matter <a href="http://stackoverflow.com/questions/2208676/javascript-asynchronously-loaded-scripts-are-those-evaluated-in-parallel-ra">in some browsers</a> though it is asynchronous.
Are there any difference in terms of browser support? performance? blocking risk?</p>

<p>I don't have any constraint in terms of order (they don't impact each other) but I want to make sure that if my script takes too long to load the page content will still load just fine. I would think the last solution works best but I am not sure of the differences.</p>
