异步加载JS的方式有哪些？-CFANZ编程社区

1、async

在script标签中使用async
但是不能控制加载顺序推荐RequireJS
<script type="text/javascript" src="demo_async.js" async="async"></script>

不写async 不写defer放在头部，则解析html的时候，在浏览器解析页面之前会直接读取并执行脚本
如果async = "async":脚本相对于页面其他部分异步执行（页面一边解析一边执行脚本）
不使用async 且defer="defer":脚本将在页面解析完毕后执行；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script src='../Scripts/js1.js' async></script>
    <script>
        console.info('html文件执行');
    </script>
</body>

</html>
2.js1.js

(function(){
    console.info('js文件执行');
    alert(3);
})();

2、动态创建 script DOM：document.createElement('script');
3、XmlHttpRequest 脚本注入

function loadScript(url){
    let xhr = new XMLHttpRequest()
    xhr.open('get',url,true)
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304){
                let script  = document.createElement('script')
                script.type = 'text/javascript'
                script.text = xhr.responseText
                document.body.appendChild(script)
            }
        }
    }
    xhr.send(null)
}

异步加载库 LABjs

源码地址：https://github.com/getify/LABjs
实现方式：

<script src="LAB.js"></script>
<script>
  $LAB
  .script("http://remote.tld/jquery.js").wait()
  .script("/local/plugin1.jquery.js")
  .script("/local/plugin2.jquery.js").wait()
  .script("/local/init.js").wait(function(){
      initMyPage();
  });
</script>

模块加载器 Sea.js

1、async

异步加载库 LABjs

模块加载器 Sea.js