JavaScript script标签同步异步加载过程

最新推荐文章于 2024-04-23 16:44:07 发布

小荣的网络开发日志

最新推荐文章于 2024-04-23 16:44:07 发布

阅读量1.8k

点赞数

分类专栏： JavaScript学习文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44000173/article/details/126119783

版权

JavaScript学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

同步加载

同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。

<script src="http://xxx/script.js"></script>
<!--所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。-->

异步加载

异步加载又叫非阻塞加载，浏览器在下载执行js的同时，还会继续进行后续页面的处理。主要有三种方式。

defer

<script src="http://xxx/script.js" defer></script>
 <!--要等dom文档全部解析完（dom树生成）才会被执行。-->

async

<script src="http://xxx/script.js" defer></script>
 <!--加载完就执行;async只能加载外部脚本，不能写js到标签里。-->

Script DOM Element

这种方法是在页面中<script>标签内，用 js 创建一个 script 元素并插入到 document 中。
以下是封装函数兼容性的异步加载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三个状态

document.readyState === "loading" //表示document仍在加载
document.readyState === "interactive"//文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
interactive //活跃状态，dom树绘制完成
document.readyState === "complate" T文档和所有子资源已完成加载。状态表示 [load]