javascriptjqueryasynchronousmodernizryepnope

Modernizr - Which scripts get loaded asynchronously?

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 scripts Asyncronously. But in the above example, which ones are loaded async?

Do all of the following get loaded asyncronously?

  1. jquery.min.js
  2. someplugin.js
  3. anotherplugin.js
  4. ga.js

Or is it a combination of async and ordered loading like this:

  1. jquery.min.js is loaded first
  2. Then someplugin.js and anotherplugin.js is loaded async
  3. finally, ga.js is loaded

I'm having a hard time testing which case it is.

Solution

  • You've selected a fairly complex example to dissect. So lets do it in steps.

    1. The three parameter sets {...},{...},{...} will execute sequentially.
    2. Inside the first parameter set you will load jQuery from google's CDN, then when complete you test if jQuery actually loaded. If not (perhaps you are developing offline and the google CDN is not reachable), you load a local copy of jQuery. So these one is "sequential", but really only one of them will load.
    3. In the second parameter set you load someplugin.js and 'anotherplugin.js` simultaneously and asynchronously. So they will be downloaded in parallel. Its great when you can parallel 2 items at a time as that is the "weakest link" for browsers today (yup only IE, Every other browser will parallel 6-8 files at a time).
    4. In the third parameter set you load the google analytics script.

    Remember modernizr is a collection of tools. The included loader is actually just a repackaged yepnope. So you can google for more about yepnope.

    The idea with the sequential loads is to be able to ensure that dependencies load in order (example your jQuery plugins must load after jQuery framework). The purpose of the parallel downloads syntax in parameter set two is to speed up performance for multiple files that are not co-dependent (example you could load multiple jQuery plugins in parallel once jQuery is loaded as long as they don't depend on eachother).

    So to answer your question, your hypothesis #2 is correct. If you'd like to explore more using firebug, add some console.log statements in each parameter set's complete function. You should see the 3 groups complete sequentially every time. Now switch firebug onto the "Net" tab to watch the file requests go out. The files someplugin.js and 'anotherplugin.js` won't necessarily load in the same order everytime. The requests will go out in order, but there timing bars should overlap (showing them as parallel). Testing this locally will be hard because it'll be so fast. Put your two test files on a slow server somewhere or bias them the opposite of what you are expecting (make the first file 1mb and the second <1kb) so you can see the overlapping downloads in the network monitor tab of firebug (this is just an artificial scenario for testing purposes, you could fill a file with repeated JS comments just to make an artificially slow file for testing).

    EDIT: To clarify a little more accurately, I'd like to add a quote from the yepnopejs.com homepage. yepnopejs is the resource loader that is included (and aliased) inside modernizr:

    In short, whatever order you put them in, that's the order that we execute them in. The 'load' and 'both' sets of files are executed after your 'yep' or 'nope' sets, but the order that you specificy within those sets is also preserved. This doesn't mean that the files always load in this order, but we guarantee that they execute in this order. Since this is an asynchronous loader, we load everything all at the same time, and we just delay running it (or injecting it) until the time is just right.

    So yes, you could put jquery, followed by some plugins in the same Modernizr.load statement and they will be downloaded in parallel and injected into the DOM in the same order as specified in the arguments. The only thing you are giving up here is the ability to test if jQuery loaded successfully and perhaps grab a backup non-CDN version of jQuery if necessary. So it's your choice how critical fallback support is for you. (I don't have any sources, but I seem to recall that the google CDN has only gone down once in its entire lifetime)