I noticed that there seems to be a couple of slightly different syntaxes for loading js files asynchronously, and I was wondering if there's any difference between the two, or if they both pretty much function the same. I'm guessing they work the same, but just wanted to make sure one method isn't better than the other for some reason. :)
Method One
(function() {
var d=document,
h=d.getElementsByTagName('head')[0],
s=d.createElement('script');
s.type='text/javascript';
s.src='/js/myfile.js';
h.appendChild(s);
})(); /* note ending parenthesis and curly brace */
Method Two (Saw this in Facebook's code)
(function() {
var d=document,
h=d.getElementsByTagName('head')[0],
s=d.createElement('script');
s.type='text/javascript';
s.async=true;
s.src='/js/myfile.js';
h.appendChild(s);
}()); /* note ending parenthesis and curly brace */
I played around with this and created a library for this that includes support for firing a callback when the script eventually loads.
https://github.com/ssoroka/sigma
The only difference that I notice is the
s.async=true;
in the Facebook method.Source and Further reading: Whatwg.org HTML 5: The script element
As for the advantages, you may want to check what Google had to say on this last December: