js代码的执行顺序
文章内容由http://www.2cto.com/kf/201401/273825.html和http://www.cnblogs.com/rubylouvre/archive/2009/08/21/1551270.html内容整合而成
JavaScript是一种描述型脚本语言，它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制，或者简单地说，你不能掌握javascript的执行顺序，那你就犹如伯乐驾驭不了千里马，让千里马脱缰而出，四处乱窜。
那么JavaScript是怎么来进行解析的吗？它的执行顺序又是如何的呢？在了解这些之前，我们先来认识几个重要的术语：
1、代码块
<script type="text/javascript">
alert("这是代码块一");
</script>
<script type="text/javascript">
alert("这是代码块二");
</script>
JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。什么意思呢? 举个例子，你就明白了：
<script type="text/javascript">
alert(str);//因为没有定义str，所以浏览器会出错，下面的不能运行
alert("我是代码块一");//没有运行到这里
var test = "我是代码块一变量";
</script>
<script type="text/javascript">
alert("我是代码块二"); //这里有运行到
alert(test); //弹出"我是代码块一变量"
</script>
上面的代码中代码块一中运行报错，但不影响代码块二的执行，这就是代码块间的独立性，而代码块二中能调用到代码一中的变量，则是块间共享性。
2、声明式函数与赋值式函数
JS中的函数定义分为两种：声明式函数与赋值式函数。
<script type="text/javascript">
function Fn(){ //声明式函数
}
var Fn = function{ //赋值式函数
}
</script>声明式函数与赋值式函数的区别在于：在JS的预编译期，声明式函数将会先被提取出来，然后才按顺序执行js代码。
3、预编译期与执行期
事实上，JS的解析过程分为两个阶段：预编译期(预处理)与执行期。预编译期JS会对本代码块中的所有声明的变量和函数进行处理（类似与C语言的编译），但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值（即只是分配了内存）。
举个例子：
<script type="text/javascript">
var a=100;
var b=true;
function test(){
alert(a);
alert(b);
b=false;
alert(b);
var a=200;
alert(a/2);
alert(++Math.PI);
alert(Math.PI++);
}
test();
</script>
这段代码执行后的效果就是首先弹出undefined、然后弹出true，接着再弹出其他，也就是说，第一行alert（a）执行时，a并未赋值，而b已被赋值为了true。这是为什么？涉及到两个知识点：
1、变量的作用域
2、js代码的执行顺序
首先，js要预编译，预编译的过程中，为每个变量分配了内存。
第二步，按照代码的顺序执行代码：
第一行，为全局变量a赋值
第二行为局部变量b赋值
第三行进入了函数test，则由于局部变量会在函数内部覆盖同名的全局变量,故此时的状态便是a未赋值，b的值为true
第四行，弹出a值，此时未赋值的a当然要弹出undefined啦。
注意，当我们仅仅定义了函数，而未调用时，函数只是被声明而已，并不执行，比如以下代码：
function loadEvent(){
var a=5;
var b=10;
a=[a,b];
b=a[0];
a=a[1];
alert("a:"+a+",b:"+b);
}
</script>
</head>
<body >
<div id="divTest">
</div>
<button aa="aaa" click="noRepeat">delete</button >
</body>
</html>
</pre><div>由于并未调用loadEvent函数，网页上并无弹出的效果，只有当我们调用了函数，比如：</div><div><pre class="html" name="code"><body onload="loadEvent()"> <div id="divTest"> </div> <button aa="aaa" click="noRepeat">delete</button > </body>
此时才会在浏览器上显示弹出效果。
现在，让我们来总结整理下：
step 1. 读入第一个代码块。
step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。
step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。
step 4. 执行代码段，有错则报错（比如变量未定义）。
step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。
step6. 结束。
而根据HTML文档流的执行顺序，需要在页面元素渲染前执行的js代码应该放在前面的<script>代码块中，而需要在页面元素加载完后的js放在元素后面，body标签的onload事件是在最后执行的。