Speedy JavaScript

Do you want some speedy JavaScript? Well do ya? You want speedy JavaScript, don’t ya boy?

OK, enough wagging the dog. We all want fast renders in our web pages. We don’t want to wait on JavaScript to slow us down. So we do things like compress all of our JavaScript into one file and then minify (or uglify) it to make it as small as possible. We do this in an effort to remove as much latency from our web applications as possible. Should you always minify your JavaScript? Maybe, it will depend on the number of scripts that you have, how large the files are, etc. All of that is a different discussion and a different blog post. For now let us look at not blocking the browser while we load all of our handy-dandy functions into memory.

Speedy Javascript
Let’s push the browser into warp speed by allowing it to process all of our JavaScript files asynchronously. Before the browser can render a page it has to build the DOM tree by parsing the HTML markup. During this process, whenever the parser encounters a JavaScript it has to stop and execute it before it can continue parsing the HTML. In the case of an external JavaScript the parser is also forced to wait for the resource to download, which may incur one or more network round trips depending on the size of your script file and the network you’re on and delay the time to first render of the page. The goal is to remove as many of these blocks as we can.

We will aim to avoid the use of blocking JavaScript, especially external scripts that must be fetched before they can be executed. Scripts that are necessary to render page content can be in-lined to avoid extra network requests, however the in-lined content needs to be small and must execute quickly to deliver good performance. Scripts that are not critical to initial render should be made asynchronous or deferred until after the first render.

Now this speed increase is quick, easy, and free for who have customers/clients using a modern HTML5 browser. Below is an example of your JavaScript include tags before

<script type="text/javascript" src="components/angular/angular.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>

… and after.

<script async type="text/javascript" src="components/angular/angular.js"></script>
<script async type="text/javascript" src="scripts/app.js"></script>

That is it. Nothing else, just add the async attribute to your script tag. When present, it specifies that the script will be executed asynchronously as soon as it is available. Otherwise the browser will block until the script is fetched and executed, before it will continue parsing the page. This is also one of the main reasons people started putting their JavaScript at the bottom of the page instead of in the header. As long as the JavaScript does not rely on any specific DOM element to be present at the time of page load, with the async attribute, you can now place the script tag where it makes sense.

Please note that asynchronous scripts are not guaranteed to execute in specified order and should not execute actions directly on the document! Scripts that depend on execution order or need to access or modify the DOM or CSSOM of the page may need to be rewritten to account for these constraints.

The loading and execution of scripts that are not necessary for the initial page render may be deferred until after the initial render or other critical parts of the page have finished loading. Doing so can help reduce resource contention and improve performance. I hope that this was helpful for you. If it was, like my post. Please leave me any comments or questions below.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s