title: Loading of javascript file
body: <p>I'm new to working with javascript &amp; I'm learning more &amp; more every day.
  I have some questions regarding the very basics of the loading, execution &amp; defer loading of javascript. The more I search &amp; read about this on different sites the more confused I get...</p>
  
  <p>Questions:</p>
  
  <p><strong>1. Loading of external files in the <code>&lt;head&gt;</code> vs. loading of these files in the end of document &amp; just before <code>&lt;/body&gt;</code>.</strong></p>
  
  <p>What is the difference here?
  What I've come to understand is that when placing the loading just before <code>&lt;/body&gt;</code> then loading of the document happens before the js is executed. But what about <em>rendering</em> of the document? Is the rendering of the document also happening before the js is executed? Like so:</p>
  
  <p>1 Loading of document</p>
  
  <p>2 Rendering of document</p>
  
  <p>3 Loading of js-files</p>
  
  <p>4 Execution of js</p>
  
  <p><strong>2. Defer loading of js-files. I've read Google's recomendations for js-loading. My question here is kind of the same as above. When is the actual <em>rendering</em> of the document taking place?</strong></p>
  
  <p>Google recomends using this code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function downloadJSAtOnload() {
  var element = document.createElement("script");
  element.src = "your-js-file.js";
  document.body.appendChild(element);
  }
  if (window.addEventListener)
  window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
  window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
  &lt;/script&gt;
  </code></pre>
  
  <p>Is the order here as follows?:</p>
  
  <p>1 Loading of document</p>
  
  <p>2 Loading of js-files</p>
  
  <p>3 Execution of js</p>
  
  <p>4 Rendering of document</p>
  
  <p>Really hope someone can share some light on this for me...
  Best, Niklas</p>