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: 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

I will try to say everything with one URL, it will save us both time.

Please have a look at this presentation from the author of a book that addresses topics such as the ones you are mentioning. I found the presentation (there is a youtube one also - i think in the google channel) very very interesting. It explains much of what you want to know.

http://www.slideshare.net/souders/sxsw-even-faster-web-sites

http://www.youtube.com/watch?v=aJGC0JSlpPE (long video many details on performance params/topics)

Answer 2

Your last example modifies the DOM tree and can only be used after the DOM tree is complete (onload). So the browser is already able to fully render the page, while you're loading the js script.

Here is a example how firefox renders 2 different versions:

• test.html loads with your method above within onload at the bottom of the page.
• test2.html loads with an simple script tag in head.

Note the red line, this is when the onload element is triggered.

Answer 3

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.