异步加载JS,script 标签的 defer 和 asnyc 属性的作用以及二者的区别?

异步加载JS

方案一: 

HTML5 中新增的属性,Chrome、FF、IE9&IE9+均支持(IE6~8 不支持)。此外,这种方法不能保证脚本按顺序执行。

方案二: 

兼容所有浏览器。此外,这种方法可以确保所有设置 defer 属性的脚本按顺序执行。

方案三:动态创建 

(function() {
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
    var tmp = document.getElementsByTagName("script")[0];
    tmp.parentNode.insertBefore(s, tmp);
})();

解析:

无论 

嵌入代码的解析=执行 外部文件的解析=下载+执行

script 标签存在两个属性,defer 和 async,这两个属性只对外部文件有效

来源整理自:vue3js.cn 面试官系列