Let's Start This Off ($script.js)

This is my first blog post ever, which goes without saying that this is my first blog post on this blog. I figure I’ll start off strong with a new development in JavaScript. If you’ve gotten into JavaScript development and also tried enhancing performance on sites that use Javascript, you probably already know that when the browser downloads a JavaScript file, it is executed immediately. While JavaScript is being executed, the browser will stop downloading resources such as images and style sheets. This can be really painful on sites that use a large amount of JavaScript because it can seem to bring the browser to a halt.

One best practice of adding all the scripts to the bottom of the page can help, but it doesn’t necessarily solve the problem. It just puts the JavaScript off until later so it can still halt images and other resources that haven’t loaded yet. Anyway, there have been numerous JavaScript libraries built to help get around this. One of the most recent and, I believe, one of the best is called $script.js. It was written by Dustin Diaz, one of the front end developers for Twitter.

$script.js offers a simple interface to asynchronously download and run script files, which allows the browser to continue loading and rendering. If you’d rather, you can go to the original $script.js post that Dustin Diaz wrote to announce its release instead of finishing this post, because I don’t really mention anything here that isn’t already on his post.

At its simplest, you can simple write one short line of code to load a script and have it run, like this:

$script('script_file.js')

Isn’t that dead simple? The thing you have to note, though, is that since this is loaded asynchronously, it probably will not run before you get to the next line of code. If the code that proceeds this call is dependent on the script that you want to download, then this syntax will not work, but this syntax is great for loading something like Google Analytics, which is completely independent of any of your other scripts.

An example that requires another script is if a lot of your code is dependent on jQuery; then you need to be sure that jQuery is fully loaded before you continue on with the code. The syntax for something like that is pretty simple too.

$script('library.js', function() {
    // do stuff with library.
});

The only difference is that you supplied an additional parameter that is a callback function to $script.js, which will be run after library.js has finished loading. These are just the basic things you can do with it. You can also give identifiers to the scripts so that you can have multiple callbacks that are dependent on the same script. There are examples of this and some other advanced ways to use $script.js in the original post. I would highly recommend that you check that out to learn more about Dustin’s neat little creation.