Non-blocking javascript and css in modern browsers. Is it still needed?

Question

I am playing a little with some non-blocking JavaScript loading. This means I have a small snippet of JavaScript in my head, and load all my external files at runtime. I even took it a little further to load CSS non-blocking.

I see the articles I could find are a little outdated, that is why I want to know if this is all still relevant.

Now first the scripts, they look like this:

<script>
(function () {
    var styles = JSON.parse(myObject.styles);
    for( name in styles ){
        var link  = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('type', 'text/css');
        link.setAttribute('href', styles[name]);
        document.getElementsByTagName('head')[0].appendChild(link);
    }

    var scripts = JSON.parse(myObject.scripts);
    for( name in scripts ){
        var e = document.createElement('script');
        e.src = scripts[name];
        e.async = true;
        document.getElementsByTagName('head')[0].appendChild(e);
    }
}());
</script>

myObject.styles is here just an object that holds all the urls for all the files.

I have run 3 test, here are the results:

Normal setup

This is just the normal setup, we have 4 css files in the head, and 3 js files at the bottom of the page.

Now I do not see anything blocking. What I see it that everything is loading at the same time.

Non-blocking JS

Now to take this a little further, I have made ONLY the js files non-blocking. This with the script above. I suddenly see that my css files are blocking up the load. This is strange, because it is not blocking anything in the first example. Why is css suddenly blocking the load ?

Everything non-blocking

Finally I did a test where all the external files are loaded in a non-blocking way. Now I do not see any difference with our first method. They just both look the same.

Conclusion

My conclusion is that the files are already loaded in a non-blocking way, I do not see a need to add special script.

Or am I missing something here?

More:

• Article: http://www.yuiblog.com/blog/2008/07/22/non-blocking-scripts/
• Question: Javascript non-blocking scripts, why don't simply put all scripts before </body> tag?
• Question: Do modern browsers still limit parallel downloads?
• Code: http://calendar.perfplanet.com/2010/the-truth-about-non-blocking-javascript/
• Code: http://blog.fedecarg.com/2011/07/12/javascript-asynchronous-script-loading-and-lazy-loading/

Answer 1

Yes, in today's browsers, files referenced are being loaded non-blocking way. But there are differences:

• ready event appears sooner if you put "things that you do not need to wait for" for dynamic load, as you can see from the timing of the blue bar. So actions in the page may start sooner.
• scripts that are loaded from the text in the page (as opposed from dynamic loading) are executed in order. So they must wait for each other, if someone is loading longer. Dynamically loaded scripts, on other way, do execute as soon as possible unless put .async=false to script element.

So, on contemporary browsers, the difference is only semantical (static load simulates old sequential way, dynamic is much more parallel).

Answer 2

It depends of how many files you want to load in the same time. In your case you are using 3 JavaScript files. Different browsers have different limits, so it's mean when you have for example 7 JavaScript files in Frefox 7th will be loaded after 6 have finished, since Firefox has limit 6 parallel downloads.

Using scripts or loading scitps just before tag is still good approach. Try to repeat your test with more JavaScript files, like 10 or so.