异步.js文件加载语法

tab*_*ber 16 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 */
Run Code Online (Sandbox Code Playgroud)


方法二(在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 */
Run Code Online (Sandbox Code Playgroud)

Dan*_*llo 16

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

asyncdefer属性是表明脚本应该如何执行布尔属性.

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

来源和进一步阅读:Whatwg.org HTML 5:脚本元素

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