js执行顺序

<span style="font-family: Verdana, Arial, Helvetica, sans-serif; background-color: rgb(245, 250, 254);">JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。而且在分析执行同一段代码中，定义式的函数语句会</span><span style="background-color: rgb(245, 250, 254); font-family: Verdana, Arial, Helvetica, sans-serif;">被提取出来优先执行。函数定义执行完后，才会按顺序执行其他代码。</span>

才会按顺序执行其他代码。

例1：

<script type="text/javascript">
	function a(){
		console.log("kkk");
	}
	a();//sss
	function a(){
		console.log("sss");
	}
	a();//sss
</script>

在第一次调用a函数之前，第一个函数语句 定义的代码已经被第二个函数定义语句的代码覆盖了，这就是为什么在例子2中第一次调用sss时，也会输出后面定义的函数内容的原因了。

例2：

<script type="text/javascript">
	var a = 10;
	function con(){
		console.log(t);
		var t = 9;
		console.log(t);
	}
	con();

<span style="white-space:pre">	</span>//undefined 

<span style="white-space:pre">	</span>//9
</script>

在执行函数con时，先声明t变量并未赋值，覆盖了外层的t变量，第一个console.log(t)时undefined，t=9,执行第二个console.log(t)，t变为9

1、代码块

<script type="text/javascript"> 
	alert(str);//因为没有定义str，所以浏览器会出错，下面的不能运行 
	alert("我是代码块一");//没有运行到这里
	var test = "我是代码块一变量"; 
</script> 
<script type="text/javascript"> 
	alert("我是代码块二"); //这里有运行到
 	alert(test); //弹出"undefined" 
</script>

上面的代码中代码块一中运行报错，但不影响代码块二的执行，这就是代码块间的独立性，而代码块二中能调用到代码一中的变量，则是块间共享性

2、声明式函数和赋值式函数

<script type="text/javascript">
	function func(){

	}
	var func=function(){
		
	}
</script>

声明式函数与赋值式函数的区别在于：在JS的预编译期，声明式函数将会先被提取出来，然后才按顺序执行js代码。

3、预编译期与执行期

事实上，JS的解析过程分为两个阶段：预编译期(预处理)与执行期。

预编译期JS会对本代码块中的所有声明的变量和函数进行处理，但需要注意的是此时处理函数的只是声明式函数，而且变量也只是进行了声明但未进行初始化以及赋值。

<script type="text/javascript"> 
<span style="white-space:pre">	</span>Fn(); //执行结果："执行了声明式函数",在预编译期声明函数及被处理了，所以即使Fn()调用函数放在声明函数前也能执行。 
<span style="white-space:pre">	</span>function Fn(){ //声明式函数 
	<span style="white-space:pre">	</span>alert("执行了声明式函数");
<span style="white-space:pre">	</span>}  
<span style="white-space:pre">	</span>var Fn = function(){ //赋值式函数 
	<span style="white-space:pre">	</span>alert("执行了赋值式函数"); 

<span style="white-space:pre">	</span>} 
<span style="white-space:pre">	</span>Fn(); //<span style="font-family: "Segoe UI", "Lucida Grande", Helvetica, Arial, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", FontAwesome, sans-serif;">执行了赋值式函数</span>

</script>

//代码块一 

<script type="text/javascript"> 

<span style="white-space:pre">	</span>alert(str);//浏览器报错,但并没有弹出信息窗 

</script> 

//代码块二 

<script type="text/javascript"> 

<span style="white-space:pre">	</span>alert(str); //弹窗"undefined" 

<span style="white-space:pre">	</span>var str = "aaa"; 

</script>

js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值，所以导致代码块二中的变量是unfiened的，而代码一中的变量是完全不存在的，所以浏览器报错。

<script type="text/javascript">

<span style="white-space:pre">	</span> Fn(); //浏览器报错:"undefined" 

</script> 

<script type="text/javascript"> 

<span style="white-space:pre">	</span>function Fn(){ //函数1 

<span style="white-space:pre">		</span>alert("执行了函数1"); 

<span style="white-space:pre">	</span>} 

</script>

为什么运行上面的代码浏览器会报错呢？声明函数不是会在预处理期就会被处理了吗，怎么还会找不到Fn()函数呢？其实这是一个理解误点，我们上面说了JS引擎是按照代码块来顺序执行的，其实完整的说应该是按照代码块来进行预处理和执行的，也就是说预处理的只是执行到的代码块的声明函数和变量，而对于还未加载的代码块，是没法进行预处理的，这也是边编译边处理的核心所在。

step 1. 读入第一个代码块。

step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。

step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。

step 4. 执行代码段，有错则报错（比如变量未定义）。

step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。

step6. 结束。

而根据HTML文档流的执行顺序，需要在页面元素渲染前执行的js代码应该放在前面的<script>代码块中，而需要在页面元素加载完后的js放在元素后面，body标签的onload事件是在最后执行的。