title: Where to add asynchronous scripts in javascript
body: <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="https://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>