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

Page load with css in the head and javascript at the bottom

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

Page load with non-blocking javascript

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

Page load with 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:

I'm curious how things look on mobile browsers. Since most of them are webkit should be the same. Did you test it? Personally I always put script before — Wojciech Bednarski, Nov 19 '11 at 20:37
I did not test this, and I do not know how I could do this. If you could tell me how I can do these speed tests for mobile browsers I will do them and will add them to the post. — Saif Bechan, Nov 19 '11 at 20:40

score 2 · Accepted Answer · 2011-11-19T22:30:13.730

2

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).

edited Nov 19 '11 at 22:30

answered Nov 19 '11 at 20:50

Ah I did not even notice the blue bar, but indeed it appears earlier. Makes me question, because the the JS files appear to run later.How i know: I load a JS file that gets some data from loacalStorage and ads it in a container. In the normal setup, having everything there, it is not noticable that something is loaded, you cannot see it filling. At the last method, the container is empty for a split second, and then it fills. So method 1 fires the scripts faster. Does that make any sense? – Saif Bechan Nov 20 '11 at 02:03
They run as soon as possible if you load them async. It is hard to see a difference, though unless they do some substantial work. They are single-thread and a lot of things happening behind the scenes like applying css, so you can't tell from one example. – Nov 20 '11 at 09:48

score 0 · Answer 2 · answered Nov 19 '11 at 20:53

0

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.

answered Nov 19 '11 at 20:53

Wojciech Bednarski

6,033
9
49
73

Ok I understand this. I can do the test but I do not know if it will be relevant. I do not think anyone would load that many js or css files at the start of the website. That is why I question of this method of non-blocking is not needed anymore in modern browsers. If you keep your files reasonable, the browser will do the work for you. – Saif Bechan Nov 20 '11 at 01:58