W3C home > Mailing lists > Public > public-html@w3.org > October 2010

Re: Executing script-inserted external scripts in insertion order

From: Getify <getify@gmail.com>
Date: Fri, 15 Oct 2010 08:42:48 -0500
Message-ID: <91E57146ABB24993996FEA796A043DCF@spartacus>
To: "public html" <public-html@w3.org>
?> ?> Do you have example sites that use these libraries in a mode that's
>> now broken?  I'm not familiar with these libraries.

It's very important to note: merely pulling up a site like this in a suspect 
browser and looking for "breakage" is a somewhat problematic way to 
investigate this issue.

The pattern that will be problematic is if you are loading one or more of 
your scripts from remote locations. For instance, loading jQuery from a CDN, 
and then another script from another location like an analytics script, and 
then some scripts from your local domain.

The changes that have been landed (in Mozilla and now in Webkit), introduce 
race conditions (and sometimes just failure to load). As we know, race 
conditions are not always easy to spot. You have to exhaustively test 
sometimes to identify them. And they're not always repeatable. Also, if 
you're not very familiar with a site's intricate JS behavior before, it's 
harder sometimes to see if things are broken (especially if a site does a 
good job of progressive enhancement).

But the logic is undeniable. This pattern is absolutely going to break with 
these changes:

$LAB.script("anything").wait().script("http://remote.tld/else").wait().script("http://another.tld/stuff").wait();

The "preloading" trick (IE/Webkit/Chrome) will apply to "else" and "stuff", 
and in FF they will be in a race condition, even though the $LAB chain 
expresses that "else" needs to execute before "stuff". In Webkit with the 
new patch, "else" and "stuff" will not ever even load.

Again, let's give a more concrete $LAB chain that represents a very common 
pattern:

$LAB
.script("http://remote.tld/jquery.js").wait()
.script("http://remote.tld/jquery-ui.js").wait()
.script("http://another.tld/myplugins.js")
.wait(function(){
   // init jQuery, jQuery-UI, and my plugins
});

You have to execute jQuery, *then* jQuery-UI, *then* your plugins. But for 
performance, you want LABjs to load all 3 scripts in parallel rather than 
serially. This pattern has worked in all browsers for quite awhile, and now 
is going to break in FF and Webkit unless W3C acts to address the needed use 
case.

--Kyle 
Received on Friday, 15 October 2010 13:43:24 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 9 May 2012 00:17:15 GMT