Easy methods to load non-blocking JavaScript

Tags: load non-blocking JavaScript

The concept of blocking and non-blocking scripts tags was first introduced by Steve Souders, a few years back. He wanted to show how <script> tag delays the downloading of websites and other resources. This flaw in script tags will do a lot of harm for websites, especially during the initial page load. The tag may cause your page to appear blank for a long time; there by irritating the visitors and making them choose your competitor website.

Nowadays, loading JavaScript is one of the toughest parts that post of the browsers face while loading websites. The ‘script tag’ makes the browser stop loading the website. The browser will automatically stop doing its work, due to problems in the JavaScript. For this reason, it is very important to put the script tags at the end of HTML, just ahead of </body>. Don’t worry even if you see your browser unresponsive for some time, it won’t be easily noticeable as the main content gets loaded soon.  But even this solution may not work well for certain ‘multi-megabyte client side applications’ that we use now.  Certain extreme cases may require the loading of large code libraries using ‘script tag injections’ or techniques using Ajax.

You can tryout the following suggestions to get the needed browser support.

The defer Attribute

defer Attribute was first introduced by IE4, and is now an important part of HTML 4 and XHTML specifications. By adding this Boolean attribute to the <script> tag you can tell the browser to wait until it completes setting-up the other parts of the page, before doing something with the blocking of JavaScript. This will make the page wait until it gets ready to run the script.

Adding defer Attribute will thus help the browser to easily download file.js and other deferred scripts at once without stopping the processing of the page. This script will be executed only when the page finishes parsing. The page won’t therefore look blank even in browsers that don’t enable JavaScript.

The async Attribute

async Attribute was first introduced in HTML5. This is more or less identical to defer. But async script executes first, immediately after download, even before the load event. This script may not get executed as per the sequence in which they occur in the page. But they will be loaded by the time the window onload event occurs.
async Attribute is supported by browsers like Firefox 3.6, Opera 10.5, and the latest version of WebKit.. Web masters also expect support from next versions of Chrome and Safari and IE.

As of now you can use both async and defer in website development to get the needed browser support. Let’s hope for more discoveries related to this soon.  Or what if we really get a complete non-blocking JavaScript loading method that works in all browsers? Yes, latest innovations in website development will surely work wonders soon.

Comments and Feedback

Post your Comment

Type your comment here*


Verification Code Image

Back to Main Top of Page