JS异步加载的三种方式

JS异步加载的三种方式

我们平时使用的最多的一种方式即同步加载，又称阻塞模式。会阻止浏览器的后续运行，停止后续的解析，只有当前加载完成后，才能进行下一步操作。所以接下来我会介绍三种异步加载的方式。
异步加载即非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。

一、defer （IE适用） 代码块可以写在script标签中

<script src="test.js" defer></script>

或

<script src="test.js" defer>
        console.log(123);
</script>

二、async （Google 、Firefox等浏览器适用） 代码块不可以写在script标签中

<script src="test.js" async></script>

三、按需加载

<script>
        // 动态生成script标签
        var script = document.createElement('script');
        // 开始下载文件
        script.src = 'test.js';
        // 等到所有的html文件解析和加载完成后，将script添加到body里面
        document.body.appendChild(script);
    </script>

将第三种方法封装成函数：

 <script>
        function loadScript(url,callback){
            // 生成script标签
            var script = document.createElement('script');
            // 判断状态
            if(script.readyState){
                    // IE浏览器执行
                    script.onreadystatechange = function(){
                        if(script.readyState == 'complate' || script.readyState == 'loaded'){
                            callback();
                        }
                    }
            }else{
                // Google 、Firefox等浏览器执行
                script.onload = function(){
                    callback();
                }
            }
             // 开始下载文件
            script.src = url;
            // 等到所有的html文件解析和加载完成后，将script添加到body里面
            document.body.appendChild(script);
        }
    </script>