Modernizr - Which scripts load asynchronously?

Question

I have the following:

Modernizr.load([ { load : '//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', complete : function () { if ( !window.jQuery ){ Modernizr.load('/js/jquery-1.6.2.min.js'); } } }, { load : ["/js/someplugin.js", "/js/anotherplugin.js"], complete : function() { // do some stuff } }, { load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js' } ]}; 

I read that Modernizr loads Asyncronously scripts. But in the example above, which ones are loaded async?

Does all of the following load asynchronously?

• jquery.min.js
• someplugin.js
• anotherplugin.js
• ga.js

Or this is a combination of asynchronous and ordered loading as follows:

• First, jquery.min.js is loaded.
• Then someplugin.js and anotherplugin.js are loaded async
• finally loading ga.js

It’s hard for me to check in which case.

Answer 1

You have chosen a rather complicated example for analysis. So let's do it step by step.

• Three sets of parameters {...},{...},{...} will be executed sequentially.
• Inside the first set of parameters, you download jQuery from the Google CDN, and then when you are done, you will check if jQuery is really loaded. If not (you may be working offline and the Google CDN is not available), you download a local copy of jQuery. Thus, they are "sequential", but only one of them is actually loaded.
• In the second parameter, you load someplugin.js and 'anotherplugin.js` simultaneously and asynchronously. Therefore, they will be loaded in parallel. This is great when you can use two elements at the same time at the same time, since this is the "weakest link" for browsers today (only for IE, each other browser will have 6-8 files in parallel at a time).
• In the third set of parameters, you load google script analytics.

Remember that modernizr is a toolbox. The included bootloader is actually just repackaged by yepnope . This way you can google learn more about yepnope.

The idea with sequential loads is to provide dependency loading (for example, your jQuery plugins should load after the jQuery framework). The purpose of the parallel download syntax in the parameter set two is to speed up work for several files that are not dependent on each other (for example, you can simultaneously load several jQuery plugins after loading jQuery if they are not dependent on eachother).

So, to answer your question, your number 2 hypothesis is correct. If you want to learn more about using firebug, add a few console.log statements to each parameter set function. You should see that 3 groups are executed sequentially each time. Now switch firebug to the "Net" tab to see how file requests go out. The files someplugin.js and 'anotherplugin.js` will not necessarily be loaded in the same order every time. The queries will act in order, but there should be overlapped timing charts (showing them as parallel). Testing this locally will be difficult because it will be so fast. Put your test files somewhere on a slow server or reject them against what you expect (make the first file 1mb and second <1kb) so that you can see overlapping downloads on the firebug network monitor tab (this is just an artificial test script, you you can fill the file with repeated JS comments just to make an artificially slow file for testing).

EDIT: To clarify a little more accurately, I would like to add a quote from the yepnopejs.com home page. yepnopejs is a resource loader that is enabled (and smoothed) inside modernizr:

In short, no matter what order you entered them, what order we follow them. The "load" and "both" files are executed after your "yep" or "nope" sets, but the order that you define within these sets is also preserved. This does not mean that files are always downloaded in this order, but we guarantee that they are executed in this order. Since this is an asynchronous loader, we load everything at the same time, and we just delay it (or enter it) until the time is ok.

So you can put jquery followed by some plugins in the same Modernizr.load expression, and they will load in parallel and be inserted into the DOM in the same order that is specified in the arguments. The only thing you give up on here is the ability to check if jQuery has loaded successfully and, if necessary, grab a backup version of jQuery without a CDN. So this is your choice as critical backup support for you. (I have no sources, but it seems like I remember that Google go CDN only once in my life)