Obsession with non-blocking scripts

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

If you are loading lots of files even as non-blocking, which you can achieve by just by putting them at the end you html just before the </body> tag since browsers do things as they find them on the page, is if you are loading quite a few.

Its good to do that but its better to see about merging files and minifying/obstuficating to get even more time shaved off. The other obvious thing is to make sure that you are GZipping the JS that goes to the browser.

Answer 2

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