Question

I was reading this very interesting article for implementing async style loading of js on my site here http://css-tricks.com/thinking-async/.

My requirements are ability to load a javascript file in a async way and then call an initialization method from the file after it has successfully loaded. Which method is preferred way ie using the classic async way or using jQuery’s getscript method as described in the above mentioned article? What are the merits or demerits of using one over the other?

EDIT: My take is: Lets say we are loading a js and then we want to call back an initialization function after successful load of the js file.This needs to happen as soon as possible because the whole module should be parsed and executed during page loading without waiting for document.ready or window.onload. Trying to do this via classic async way could lead to dealing with cross browser issues and rigourous testing, whereas if we use jquery ajax(or getscript method) we can avoid the hassles.

Also looking for this solution to load a single js file in a async way without using any library.

Answer 1

Edit: This answer is old, and apparently modern jQuery uses script injection

Loading javascript using the classic async way (which I’m assuming you mean with script injection or the async attribute in HTML 5) is very well accepted and is how most async loaders (including AMD, like RequireJS) implement it.

JQuery’s getScript method is calling eval at the end of the day, which most decent JS developers tend to shy away from.

Snippet from jQuery source, currently line 613:

( window.execScript || function( data ) {
    window[ "eval" ].call( window, data );
} )( data );

jQuery does pass in the window object as the context, saving some hassle and (likely, untested) fixing issues with things like eval’s odd handling of garbage collection. There are also likely still issues with tracking lines during debugging, depending on your tool of choice.

I am a big proponent of the AMD method (using script injection), which allows asynchronously calling scripts right after their dependencies are loaded, and allows you to pass around modules between scripts rather than relying on the global namespace. You can get more information on AMD loading and async vs sync loading in general at the RequireJS site, or by checking out this relatively simple gist.