asynchronous .js file loading syntax

Question

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 */

score 16 · Accepted Answer · edited Jun 20 '20 at 09:12

16

The only difference that I notice is the s.async=true; in the Facebook method.

The async and defer attributes are boolean attributes that indicate how the script should be executed.

There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available. If the async attribute is not present but the defer attribute is present, then the script is executed when the page has finished parsing. If neither attribute is present, then the script is fetched and executed immediately, before the user agent continues parsing the page.

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:

Google Analytics Launches Asynchronous Tracking

edited Jun 20 '20 at 09:12

Community

1
1

answered May 05 '10 at 15:10

Daniel Vassallo

312,534
70
486
432

Cool, thanks. Isn't s.asynch=true pointless in this case though, since the script is injected into the head tag? And as far as the syntax on the parenthesis: (function(){ ... })(); vs: (function(){ ... }()); - are those pretty much the same? – taber May 05 '10 at 15:21
1

@taber: Yes the parenthesis syntax achieves the same goal. ie: the function is evaluated as a function expression instead of a function statement. See: http://stackoverflow.com/questions/440739/what-do-parentheses-surrounding-a-javascript-objectfunctionclass-declaration/442408#442408 and http://stackoverflow.com/questions/1634268/explain-javascripts-encapsulated-anonymous-function-syntax/1634321#1634321 (especially the last comment). – Daniel Vassallo May 05 '10 at 15:28
@taber: I don't think that the fact that it is inserted in the `` makes any difference. (But I have no references or tests to back this). – Daniel Vassallo May 05 '10 at 15:44
The async attribute is an HTML5 feature. And the parenthesis doesn't matter. They are the same. jslint prefers `function(){}())` – David Murdoch May 05 '10 at 16:10
Thanks for adding the GA link. Yeah, it looks like "async" is just a future-proofing of the script to "officially" tell browsers (Firefox 3.6 for now) to load the script asynchronously. Thanks! – taber May 05 '10 at 16:13

score 0 · Answer 2 · answered Dec 14 '10 at 01:42

I played around with this and created a library for this that includes support for firing a callback when the script eventually loads.

Sigma.async_script_load('http://example.com/underscore-min.js', '_', function() {
  _([1,2,3,2,3,1]).uniq();
});

https://github.com/ssoroka/sigma

asynchronous .js file loading syntax

2 Answers2

Linked