Learning jQuery

In the past few years, client side frameworks/libraries have become very powerful and offers great features to implement complex functionalities on the client side, instead of relying on server side. This is really great for developers, but it has also made life difficult when it comes to managing multiple resources. One disadvantage is that loading multiple JavaScript file makes the site slower to load. This is because scripts block the rendering of the page until they are downloaded, parsed and executed. This can be fixed by using a Script loader library, and of these Head.js is the most popular. This post shows how to use Head.js to load all your JavaScript, including third party libraries like jQuery.

First of all, let’s take a look at what Script loader is and how it works...

What is Script Loader?

There is no concrete definition for Script loader, but one can think of Script loader as a library that helps in loading multiple JavaScript files without blocking the page rendering. Script loader will load the script files asynchronously, which results in non-blocking of page rendering. For the sake of argument, combining all your script files, then minifying them in a single file will definitely provide better performance, compare to loading multiple files. But that will also result in blocking of the page.

While using Script Loader, one thing to note is that your JavaScript code should only run when all your script files are loaded. There is no guarantee when a particular file will be loaded, so it is best to ensure that they are all loaded before running.

Now, let’s take a look at head.js

Head.js

Head.js is a tiny script to simplify, speed up, and modernize your site. It loads JS & CSS asynchronously and in parallel, but executes them in order. It is cross-browser compatible, makes use of media queries to support responsive design and also supports feature detection like modernizr. To use it, download the library and include its reference in thesection. Finally, load all your scripts using the load method which accepts a list of script files and provides a callback function to indicate loading is completed. Like this:

head.load(‘file1.js’, ’file2.js’, function() {
    console.log(‘loading completed’);
});

It also provides event listeners like jQuery’s document.ready(), called head.ready(). If you don’t specify the callback function in load method, then use head.ready() which indicates that loading of scripts is finished. Like this:

<script>
   head.load(‘file1.js’, ’file2.js’);
</script>

<script>
    head.ready(function() {
        // loading finished.
    });
</script>

There is no difference between using a callback with load method or using it separately via the head.ready(). It’s purely developer preference.

Head.js offers many useful features and one of the best features is the ability to label the scripts and execute code once the label is loaded, irrespective of other file’s loading status. The following code will create the label:

head.load({ jQuery: "scripts/jquery.js" },
{ tweet: "scripts/twitter.js" });

In the above code, there are 2 labels. One named “jQuery” for jQuery library and another called “tweet” for a twitter library. You can name it anything. Now, let’s say you want to execute the piece of code (completely dependent on jQuery) as soon as jQuery is loaded (irrespective of twitter loading status), you can check for the label in the head.ready() listener. Like this:

head.ready("jQuery", function() {
    //code that dependent on jQuery 
});

You can also pass a file name, instead of label in head.ready() and achieve the same thing.

 head.ready("jquery.js", function() {});

Conclusion

Script loader can help improve the loading process for any web page as scripts are loaded in a non-blocking way and asynchronously. Head.js is the tiniest library available today, and even though it has not been updated in the last 3 years, it still works well in all modern browsers. This post provides an overview about using Head.js and then labelling your script for executing the label dependent piece of code.