javascript脚本从载入浏览器到显示执行的过程解析

Posted 2020-06-13

版权声明：本文为博主原创文章，未经博主允许不得转载。

简单的代码：

    <script type="text/javascript" src="xxx.js"></script>
    <script type="text/javascript">
        var i = 10;
        function say(msg){
        alert(msg);
        }
    </script>
    <script type="text/javascript">
        j=100;
        say("hello world");
    </script>

---

上面代码段的运行顺序是：

step1. 读入第一个代码段 
step2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5 
step3. 创建(全局/函数)执行环境，变量对象创建和实例化、作用域分配，对var变量和function定义做”预解析”，属于声明阶段 
step4. 执行代码段(调用函数、进入eval时，都会创建新的执行环境)，有错则报错（比如变量未定义） 
step5. 如果还有下一个代码段，则读入下一个代码段，重复step2 
step6. 结束

---

补充解释：

1、对于step1中的’代码段’指的是<script>... ...</script>标签中的内容，还包括外部引入的脚本文件，如<script src="xxx.js"></script>也被列是代码段的范畴。[每个<script>标签都提供一个被编译的且立即执行的编译单元，因为缺少链接器，javascript把它们一起抛入一个公共的全局名字空间中。–《javascript语言精粹》]

2、对于step3创建全局执行环境，并不是每一个代码段都要执行step3，实际上，一个页面只会创建一个全局执行环境，所以从step2重复，不包括step3。

3、对于step3，变量声明和函数声明都被提升到当前作用域的顶端，’预解析’过程中，所有变量被赋值为undefined值，函数被赋值为函数定义的字符串，并不会对函数体中的JS代码做特殊处理，只是将函数体JS代码的扫描结果保存在函数对象的内部属性上，在函数执行时再做进一步处理。

例如：弹出结果并不是处理计算后的值，而是a函数的定义的字符串

    <script type="text/javascript">
        function a(){
            var b =1;
            var c= 2;
            var d = b+c;
            alert(b+c);
        }
        alert(a);
    </script>

4、对于step3，创建函数执行环境，也就是创建函数的变量对象(活动对象)，声明变量和函数，是在函数被调用时进行的，函数内部定义的变量和函数都保存在改变量对象中。

例如：

<script type="text/javascript">
        function test(){
            //未用var声明，a属于全局变量，如果未调用test就完成了声明，则全局环境可以访问到a变量
            a = 2;
        }
        //alert(a);//Uncaught ReferenceError: a is not defined
        //alert(window.a);//undefined,并不能说明全局变量中已经声明了a变量，[如果你尝试检索一个并不存在的成员元素的值，将返回一个undefined值。--《javascript语言精粹》]
        test();
        alert(a);//调用之后，则可以访问a变量
    </script>

 

---

总结过程：下载、读入、语法分析、代码解析、执行

参考来源：http://www.cnblogs.com/fool/archive/2010/10/16/1853326.html