异步.js文件加载语法

时间:2010-05-05 15:02:55

标签: javascript asynchronous

我注意到,异步加载js文件似乎有一些稍微不同的语法,我想知道两者之间是否存在任何差异,或者它们两者的功能是否相同。我猜它们的工作原理是一样的,但只是想确保一种方法由于某种原因并不比另一种方法好。 :)

方法一

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


方法二(在Facebook的代码中看到这个)

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

2 个答案:

答案 0 :(得分:16)

我注意到的唯一区别是Facebook方法中的s.async=true;

  

asyncdefer属性是布尔属性,指示脚本应如何执行。

     

使用这些属性可以选择三种可能的模式。 如果存在async属性,则脚本将一旦可用就异步执行。如果async属性不存在但是存在defer属性,然后在页面完成解析后执行脚本。如果两个属性都不存在,则在用户代理继续解析页面之前立即获取并执行脚本。

来源和进一步阅读:Whatwg.org HTML 5: The script element

至于优势,你可能想要查看谷歌在去年12月所说的内容:

答案 1 :(得分:0)

我玩这个并为此创建了一个库,其中包括支持在脚本最终加载时触发回调。

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

https://github.com/ssoroka/sigma