Comments on: Beating Blocking JavaScript: Asynchronous JS

By: Arup

Arup — Tue, 07 Oct 2008 11:08:27 +0000

I have worked in this async loading js and it is live on uk.msn.com . I will coming up with few features of this later.

By: Arup

Arup — Tue, 07 Oct 2008 11:06:19 +0000

This implementation has several disavantages also . Like page timeout functionality . Sometimes the ojects are set to null and js not works on the page .

By: Vladimir Dzhuvinov

Vladimir Dzhuvinov — Mon, 15 Sep 2008 08:07:56 +0000

Hi,

I don’t know how versed your readership is, but in case there are any casual readers, it would be good first to explain to them that browser interpreters “block” script execution for a good reason:

http://www.mozilla.org/js/language/js20-1999-03-25/execution-model.html

By: ArtzStudio

ArtzStudio — Fri, 08 Aug 2008 14:15:13 +0000

If the functions contained in the JavaScript are more important than other assets (like template images, content images) on the page in terms of perception that the page is loaded and ready, then you should use the Asynchronous JS method. JavaScript can be engineered so that you would never know it was there until you did something (usually after the page has loaded), a technique called Progressive Enhancement, but the user gets to that Photo Gallery Next Button and clicks Next before your JavaScript has downloaded, it may be an undesirable experience. If your web page is JavaScript rich and has many interactive widgets that get a lot of usage, I would recommend going for the asynchronous method to ensure they are initialized as soon as possible. If your page is mainly content and JavaScript is used to spruce up the place, I would recommend loading them at the end of the page. You could even still use the Asynchronous method and set them to load on the window.load event, effectively after everything else has loaded. Incidentally, this is why it is not a rule in AOL Pagetest to load JS at the bottom. It will make your content appear faster, but at the expense of an unenhanced or broken UI. I will blog about my Progressive Enhancement solutions here in a future post.

By: Dan

Dan — Fri, 08 Aug 2008 07:38:39 +0000

One common recommendation I’ve seen to avoid the JS blocking issue is to move the JS script tags to the bottom of the HTML file. How do you think this technique compares to the one you’ve outlined here? Is it better for the JS to be in the header and start the download sooner than it would’ve been when located at the bottom of the HTML file?

By: ArtzStudio

ArtzStudio — Sat, 26 Jul 2008 23:16:43 +0000

A day before me, doh! I see you didn’t notice the Firefox snag that I ran into, what are your thoughts on that? It seems like Firefox lacks the ability to do two things at once, execution-wise (like me).

By: Stoyan

Stoyan — Sat, 26 Jul 2008 21:43:18 +0000

Heh, I wrote about this pretty much at the same time
http://yuiblog.com/blog/2008/07/22/non-blocking-scripts/