title: Using async and defer to load scripts in order
body: <p>So, I'm following the Google PageSpeed recommendation to defer above-the-fold scripts. Let's say this is the code in my <code>&lt;head&gt;</code>:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;/js/jquery.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;/js/functions.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>The <code>functions.js</code> script depends on jQuery so it's crucial that <code>jquery.js</code> is loaded and executed before <code>functions.js</code>.</p>
  <h1>What I tried:</h1>
  <p><strong>defer</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;/js/jquery.js&quot; defer&gt;&lt;/script&gt;
  &lt;script src=&quot;/js/functions.js&quot; defer&gt;&lt;/script&gt;
  </code></pre>
  <p>While this works and <code>functions.js</code> gets executed properly, when I load the page I see it flicker, as if the CSS is not yet loaded. Note that the above code is in the <code>&lt;head&gt;</code>. If I remove the <code>defer</code> attribute from <code>jquery.js</code>, the flickering disappears. That leads me to my question:</p>
  <p><strong>Mixed</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;script src=&quot;/js/jquery.js&quot; async&gt;&lt;/script&gt;
  &lt;script src=&quot;/js/functions.js&quot; defer&gt;&lt;/script&gt;
  </code></pre>
  <p>Does using <code>async</code> on the dependency script and <code>defer</code> on the dependent script ensure they will always be executed in that order? It seems to work in my tests but I don't know enough about how the parser works in order to be sure.</p>