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:
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.
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 ?
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.
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?
Yes, in today's browsers, files referenced are being loaded non-blocking way. But there are differences:
.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).
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.