Question

我注意到，异步加载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 */

Answer 1

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

async和defer属性是布尔属性，指示脚本应如何执行。

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

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

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

Google Analytics Launches Asynchronous Tracking

Answer 2

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

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

https://github.com/ssoroka/sigma

异步.js文件加载语法

2 个答案: