Downloading javascript Without Blocking

Question

The context: My question relates to improving web-page loading performance, and in particular the effect that javascript has on page-loading (resources/elements below the script are blocked from downloading/rendering).

This problem is usually avoided/mitigated by placing the scripts at the bottom (eg, just before the tag).

The code i am looking at is for web analytics. Placing it at the bottom reduces its accuracy; and because this script has no effect on the page's content, ie, it's not re-writing any part of the page--i want to move it inside the head. Just how to do that without ruining page-loading performance is the crux.

From my research, i've found six techniques (w/ support among all or most of the major browsers) for downloading scripts so that they don't block down-page content from loading/rendering:

(i) XHR + eval();

(ii) XHR + inject;

(iii) download the HTML-wrapped script as in iFrame;

(iv) setting the script tag's async flag to TRUE (HTML 5 only);

(v) setting the script tag's defer attribute; and

(vi) 'Script DOM Element'.

It's the last of these i don't understand. The javascript to implement the pattern (vi) is:

(function() {
  var q1 = document.createElement('script');
  q1.src = 'http://www.my_site.com/q1.js'
  document.documentElement.firstChild.appendChild(q1)
})();

Seems simple enough: and anonymous function is created then executed in the same block. Inside this anonymous function:

• a script element is created

• its src element is set to it's location, then

• the script element is added to the DOM

But while each line is clear, it's still not clear to me how exactly this pattern allows script loading without blocking down-page elements/resources from rendering/loading?

Answer 1

One note first:

(iv) setting the script tag's 'async' flag to 'TRUE' (HTML 5 only);

async is a "boolean attribute", in the HTML sense. That means that either of the following is correct:

<script async src="..."></script>
<script async="" src="..."></script>
<script async="async" src="..."></script>

And that both of the following make the script be loaded asynchronously, but are not conforming (because of the possible confusion):

<script async="true" src="..."></script>
<script async="false" src="..."></script>

---

Now on your question. The point is that it is the HTML parser that is being blocked by the script (because people do stupid things things like document.write("<!--"), even from external JS files, and expect it to "work"). However, in your case (vi), the HTML parser doesn't ever see the script element, because it is added to the DOM directly. Somewhat logically, if a script element (or rather, a <script> start tag) isn't seen by the HTML parser, it can't stop the parsing either.