By Daniel Ramirez
A simple but yet powerful script, and a must have for all the fellow web developers out there. As its slogan says: The only script in your <head>. But why is that?, what benefits does it have?
Some of the best practices in web development is to execute and include scripts at the bottom of the page, and set all the styles on the <head> section. This is to improve the usability and render first all the visible parts to the user so he/she feels the site more responsive and fast. If scripts were to be put on the <head> section, it would then block the rendering of the page (since it’s single threaded) because it has to download, parse and execute these scripts.
This is where Head.JS comes to rescue us. With a simple interface, it gives us the ability to parallelize the scripts downloads in a non-blocking way and at the same time with an organized dependency management to help load our scripts in order (which from time to times is a headache).
As the page says:
“Non-blocking loading is the key to fast pages. Moreover Head JS loads scripts in parallel no matter how many of them and what the browser is. The speed difference can be dramatic especially on the initial page load when the scripts are not yet in cache. It’s your crucial first impression.”
How do we use it?
We add a simple line to our head section:
<script src="/path/to/head.min.js"></script>
and at the bottom of our page, whether inline or at a .js file, we include the following:
<script>
head.js("/path/to/file1.js", "file2.js", "file3.js",..., function() {
alert('Scripts have been loaded!');
});
</script>
This will download them in parallel but execute them in order. So if you have any configuration vars for example in file1.js you will be certain that no errors will happen if you use them in file2 and are not yet declared. However when I develop a plugin or some script, I always keep in mind that javascript should be event based, that is, the scripts should be separated in methods and called based on user interaction rather than all executed when the script loads, this way I can be sure everything is loaded.
More over it also applies the Modernizr script to add some html5 and css3 features to our site and some cool features apart from just loading our scripts in an orderly way. It gives:
- Screen Size Detection
- Dynamic CSS
- CSS Router
- Browser Detector for css (for example in css we can target element #el with .ie9 #el { display: none; } )
- Feature Detection, for example:
head.feature(“video”), function() { //do something if html5 video is available }
So if you haven’t tried out head.js I suggest doing so, since besides moderniz’ing a bit your webpage it provides a good organization, speeds your site, and adds simple dependency management to your scripts. And a plus, it is a small size script. Maybe you already got a system, a process, or other component included in you IDE or deployment tool, but be sure to check out this project and contribute to it!