JavaScript异步加载的3种方式

方案一、<script>标签的async="async"属性

• async属性是HTML5新增属性，需要Chrome、FireFox、IE9+浏览器支持

• async属性规定一旦脚本可用，则会异步执行

• async属性仅适用于外部脚本

• 此方法不能保证脚本按顺序执行

<script type="text/javascript" src="xxx.js" async="async"></script>

方案二、<script>标签的defer="defer"属性

• defer属性规定是否对脚本执行进行延迟，直到页面加载为止

• 如果脚本不会改变文档的内容，可将defer属性加入到<script>标签中，以便加快处理文档的速度

• 兼容所有浏览器

• 此方法可以确保所有设置了defer属性的脚本按顺序执行

方案三、动态创建<script>标签

• 兼容所有浏览器

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