实现JS异步加载的三种方法

一、为什么要写异步加载：①js加载本身是属于同步加载的，加载js文件会阻塞文档，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。但是有些工具方法需要按需加载，有一些工具js文件它是不会改变页面的，用到再加载，不用不加载。②但是实际开发中我们只需要把script标签放在页面的最下面。完全没有必要写赘余代码，但是按需加载一定是面试的重中之重！！！二、JS异步加载的三种方案：①defer

土豆切成丝

9502人浏览 · 2022-02-11 19:23:09

土豆切成丝 · 2022-02-11 19:23:09 发布

一、为什么要写异步加载：

①js加载本身是属于同步加载的，加载js文件会阻塞文档，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。但是有些工具方法需要按需加载，有一些工具js文件它是不会改变页面的，用到再加载，不用不加载。

②但是实际开发中我们只需要把script标签放在页面的最下面。完全没有必要写赘余代码，但是按需加载一定是面试的重中之重！！！

二、JS异步加载的三种方案：

①defer

 script标签中增加defer属性，异步加载

 1.但要等dom文档全部解析完（dom树生成）才会被执行。

 2.只有IE能用；

②async

 script标签中增加async属性，异步加载

 1.加载完就执行;async只能加载外部脚本

 2.不能把js写在script标签里。

 3.w3c标准，IE9以下不支持

③封装一个函数兼容性的异步加载js文件并且可以按需执行该文件里面的函数（按需加载）

<script>
        function loadScript(url,callback){
            //url是按需加载的js文件
            //callback是按需加载的js文件中某个函数

            // 1. 创建一个script标签
            var script = document.createElement('script');    
            // 处理ie的兼容
            if(script.readyState){
                script.onreadystatechange = function(){
                    // 如果script已经下载完成
                    if(script.readyState == 'complete' || script.readyState == 'loaded'){
                        callback();
                    }
                }
            }else{
                // 监听script的下载的状态 当状态变为下载完成后 再执行callback
                script.onload = function(){
                    callback();
                }
            }
            //在后面引入的目的是如果在IE上如果下载太快（比读程序还快）
            //IE的readystatechange 事件检测状态码的时候，它早已经从loading变成complete或者loaded（以极快的速度加载完了文件，你还没来得及检测）
            // 那你再检测它就不会变了，它一直都是complete或者loaded
            //这个时候就是马后炮了，检测也没用了。
            // 2. 给script标签添加src 引入一个js文件
            script.src = url;
            // 3. 追加到body
            document.body.appendChild(script);
        }
    </script>

三、最后补充： document三个状态

 ①loading 加载中状态，dom树正在绘制中

 ②interactive 活跃状态，dom树绘制完成

③complete 完成状态（老版本的浏览器可能是loaded），dom树绘制完成并且所有的资源下载完成

这个记录下来为了方便以后使用的方便，也希望大佬们多多交流，多多留言，指出我的不足的之处啦！

有需要的小伙伴可以研究研究啦！！