异步加载js的三种方式

1.defer 异步加载

特点 ：只有IE适用，需等到dom文档全部解析完（dom树生成完，才会被执行）

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

2.async异步加载

特点：加载完就执行，async 只能加载外部脚本，不能把js代码写在script标签里

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

3.动态创建script标签

特点：避免HTML文件过大，提高页面加载速度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/**
 * 异步加载js，通过加载完成js之后，再执行callback方法
 * @param url
 * @param callback
 */
export function loadScript(url,callback){
  const script = document.createElement('script');
  script.type = "text/javascript";

  if(script.readyState){ //IE
    script.onreadestatechange = function(){
      if(script.readyState === "loaded" || script.readyState === "complete"){
        callback()
      }
    }
  }else{
    script.onload = function(){
      callback()
    }
  }
  script.src = url; //放这里 防止事件还没绑定 url加载完了 就不会执行 callback
  document.head.appendChild(script);//开始执行
}