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

简单的代码：

    <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