pros and cons of javascript async loading vs jquery ajax(or getscript) async loading

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.

bendman · Accepted Answer · 2016-12-21 05:51:00Z

2

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.

edited Dec 21, 2016 at 5:51

answered Sep 21, 2012 at 5:18

bendman

3661 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

vsync Over a year ago

This answer is quite old and might confuse people who read it to believe jQuery is bad. it was never mentioned in the answer to which version of jQuery does it refers to (old). you can do a lot of things with Promises and jQuery.. please consider updating the under. also see this.

Miloš Đakonović Over a year ago

RequireJS does not load scripts via ajax, it does job by dynamic link element creation.

bendman Over a year ago

@Miloshio It uses dynamic script element creation (not link which is primarily for CSS), which is a form of script injection as I mentioned.

Collectives™ on Stack Overflow

pros and cons of javascript async loading vs jquery ajax(or getscript) async loading

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related