asynchronous .js file loading syntax
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 开发者_如何学Cthe 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 */
The only difference that I notice is the s.async=true;
in the Facebook method.
The
async
anddefer
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 theasync
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
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
精彩评论