浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序（转）

转自：https://www.cnblogs.com/tracylin/p/5122175.html

另一篇可学习：https://blog.csdn.net/wnvalentin/article/details/79769393

去掉你代码里的 document.write("<script：https://www.cnblogs.com/ziyunfei/p/5881426.html?utm_source=tuicool&utm_medium=referral

 

其中2.3 节的通过动态脚本技术添加代码，说明如下：

先把代码贴上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="./test1.js"></script>
</head>
<body>
    <script type="text/javascript">

        function callback(){
            alert("我是callback")
        }

        function loadScript(url,callback){
            var script = document.createElement("script");
            script.type = "text/javascript";
            //绑定加载完毕的事件
            if(script.readyState){
                script.onreadystatechange = function(){
                    if(script.readyState === "loaded" || script.readyState === "complete"){
                        callback&&callback();
                    }
                }
            }else{
                script.onload = function(){
                    callback&&callback();
                }
            }
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);
        }

        loadScript("./test.js", callback)  //调用这个函数加载test.js代码并立即执行

    </script>
</body>
</html>

test.js是同文件夹下的一个js文件，内容只有一条js代码：alert("我是test.js")

test1.js也是同文件夹下的js文件，内容也只有一条js代码：alert("我是test1.js")

在浏览器中打开上面的HTML文件，执行的结果为：

1、弹出“我是test1.js”

2、弹出“我是test.js”

3、弹出“我是callback”

可以看出，代码从上而下执行，首先执行到<script type="text/javascript" src="./test1.js"></script>，则把test1.js下载下来并执行（同步执行），然后是执行body中的script标签中的代码，在这个执行过程中调用loadScript，此时会把把test.js下载下来，然后添加到一个script标签到head中，紧接着执行test.js中的代码，再是执行callback函数

所以看出在哪里调用loadScript，就在哪里下载并执行外部引入的js文件

 

posted @ 2019-07-30 18:43  olivertian  阅读(195)  评论(0)  编辑  收藏  举报