异步加载的三种方式——async和defer、动态脚本创建
① async方式
-
async属性是HTML5新增属性,需要Chrome、FireFox、IE9+浏览器支持
-
async属性规定一旦脚本可用,则会异步执行
-
async属性仅适用于外部脚本
-
如果是多个脚本,该方法不能保证脚本按顺序执行
<script type="text/javascript" src="xxx.js" async="async"></script>
② defer方式
-
兼容所有浏览器
-
defer属性规定是否对脚本执行进行延迟,直到页面加载为止
-
如果是多个脚本,该方法可以确保所有设置了defer属性的脚本按顺序执行
-
如果脚本不会改变文档的内容,可将defer属性加入到script标签中,以便加快处理文档的速度
③动态创建script标签
在还没定义defer和async前,异步加载的方式是动态创建script,通过window.onload方法确保页面加载完毕再将script标签插入到DOM中,具体代码如下:
function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute("type","text/javascript"); script.src = src; document.body.appendChild(script); } window.onload = function(){ addScriptTag("js/index.js"); }
2、异步加载的区别
1)defer是在HTML解析完之后才会执行,如果是多个,按照加载的顺序依次执行
2)async是在加载完之后立即执行,如果是多个,执行顺序和加载顺序无关
async和defer