Question

Since i discovered the concept of non-blocking scripts i have become obsessed with loading all my external scripts this way.
I have even hacked Joomla! templates(which i know is a bad practice) in order to load non-blocking scripts in the index.php file. Example code below.

(function() {
    var script = document.createElement('script'),  head = document.getElementsByTagName('head')[0]; 

    script.type = 'text/javascript'; 
    script.src = "http://www.mywebsite.com/scripts/one_of_many.js"
    head.appendChild(script);
})();

My questions are:

When is it good/bad to load non-blocking scripts?

What should be the limit for using non-blocking scripts?

Answer 1

The technique you’re using for non-blocking scripts (appending a script DOM element) will not keep script execution order on all browsers, only on Firefox and Opera.

If you don’t care about execution order then you can use it safely.

If not, you can combine it with some other techniques like script defer for IE, script in iframe or XHR.

More details on Even Faster Websites