Using Defer And Asynchronous For A Non-Blocking JavaScript Execution

On websites, JavaScript or JS, is the high-level interpreted programming language that makes pages more interesting to see and interact with. Alongside HTML and CSS, it has been one of the three core technologies that power the World Wide Web.

With the majority of websites using it and all modern web browsers supporting it, JS has long been inside the spotlight. With its functions supporting object-oriented, JS supports an array of capabilities to make web pages better.

Until there is that time when JS becomes be a trouble to work with.

The main reasons for a working JS to fail or to not work properly, are caused by the scripts in making the web browser to stop rendering a page, loading a file or run the codes. Besides being one of the biggest bottlenecks in web performance, JS that can do a lot of things to a web page can also render a browser unresponsive.

By default, JS can block a web browser from doing other useful work. The reason for this is because JS has the ability to write, modify existing web page elements, redirecting pages to another URL and others. This is why the best practice is to put the script tags at the bottom of the HTML, just before the .

If this solution is not sufficient in modern website development and design, JS scripts can be injected. Another way is to use AJAX techniques. These will prevent JS from blocking, but requires additional codes and testing to ensure that scripts run in the correct order.

Normal JavaScript Execution

This is the default behavior of JS, and that is by using script tag without any attributes. This way, the web browser that is rendering an HTML will pause parsing the HTML when the script is hit.

When parsing stops, the browser will make a request to fetch and run the script. Parsing will resume after the script finishes its execution.

Using the normal method for loading JS, there can be a huge delay for some websites, especially when the script is heavy and the website is running on a slow server.

Deferred JavaScript Execution

Deferring JS means to delay the script's execution. When the defer attribute is present, web browsers will delay JS from executing until the page's HTML parser has finished. One advantage of deferring JS is that the DOM will be available for the script to run.

Most modern web browsers can load multiple deferred scripts in parallel at once, without stopping a page's processing time.

The disadvantages of using the defer attribute is that some web browsers aren't yet supporting it. While all deferred scripts are guaranteed to execute in the order that they appear in the document, it's difficult to determine which of the script will run first. This should happen after DOM has completely loaded, shortly before the DOMContentLoaded event. But this depends on the user's operating system, browser, whether the script is cached, and what other scripts present are doing at the time.

Defer was first implemented in Internet Explorer version 4.0 and has been available in Firefox since version 3.5.

Asynchronous JavaScript Execution

Asynchronous, or async, is similar to defer. The main difference is that the script with the attribute will execute at the first opportunity when the browser finished downloading it. This way, the async method puts the best out of the normal and the defer method.

When a script is loaded asynchronously using the async property, web browsers that is parsing HTML will allow the script to download. HTML parsing will still continue until the script has finished downloading.

When the browser is finished downloading the script, it will pause parsing HTML in order to execute the script as soon as it's ready (an optional onload attribute can be added to run a specific function).

While this can speed up the process of downloading a script and its execution, there is no guarantee which of the scripts will execute in sequence. So if one script is depending on other script to run, using the async method can break a web page from working properly.

Support for async started in Firefox version 3.6 and later on Opera version 10.5.

Which One Should You Choose?

When it comes to choices, the three has their own advantages and disadvantages. But typically, using the asynchronous method is more preferred whenever possible. Then the defer and last without attributes.

If the script is modular and doesn't at all rely on any other script to run as it is intended, the asynchronous will work the best. But if the script relies upon or is upon other script(s), then the defer is the solution.

If a script is small and is relied by an asynchronous script, it can be made an inline script with no attribute, placed above the asynchronous script so the browser will execute it in order.