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

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 css 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/
  

Source: Tips4all