今天作为前端小菜跑去某厂面试，结果以失败告终。
记得面试官问我在一个页面中js的执行顺序问题，结果由于自己并没有研究过，所以不太清楚，糊里糊涂的结果把自己都说乱了。在网上查了一堆文章之后还是觉得应该由自己敲出来测试一下。下面贴一下测试代码和结果。
1
<!doctype html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>test js</title>
6
<script type="text/javascript">
7
alert("<head>标签中第一个内置js代码段，位于链接js的前面。"
);
8
</script>
9
<script type="text/javascript" src="a1.js"></script>
10
<script type="text/javascript" src="a2.js"></script>
11
<script type="text/javascript">
12
alert("<head>标签中第二个内置js代码段，位于链接js的后面。"
);
13
</script>
14
</head>
15
16
<body onload="b()">
17
<script defer>
18
alert("defer中的代码段。"
);
19
</script>
20
21
<script>
22
alert("body 中的 js 代码段。"
);
23
</script>
24
25
<script>
26
function
b(){
27
alert("b函数中的js代码段。"
);
28
}
29
</script>
30
31
<script>
32
alert("body 中的第二个 js 代码段。"
);
33
</script>
34
35
</body>
36
<script>
37
alert("body 之外的 js 代码段。"
);
38
</script>
39
</html>
40
<script>
41
alert("html 之外的 js 代码段。"
);
42
</script>
下面是a1.js的内容：
1
//
JavaScript Document
2
alert("<head>标签中链接过来的a1.js中的代码。");
下面是a2.js的内容：
//
JavaScript Document
alert("<head>标签中链接过来的a2.js中的代码。");
测试结果（alert的顺序）是：js的执行顺序基本上按照在html中出现的顺序，但是也有一些细小的变化。
1.首先执行<head>标签中的js，不论是内置还是外链形式，都是按照出现的顺序执行。
2.接着执行body中的脚本，按顺序直到<html>标签外。
3.然后执行defer="defer"的脚本。（IE中测试支持，chrome和firefox都不支持defer属性，在这两个浏览器中，将作为正常的脚本段按顺序执行）。
4.最后执行body的onload方法b()。
另外：（转自： http://www.cnblogs.com/Jason-Damon/archive/2011/11/12/2246483.html ）
JavaScript执行引擎并非一行一行地分析和执行程序，而是 一段一段 的分析执行的。而且在分析执行同一段代码中， 定义式 的函数语句会被提取出来优先执行。函数定义执行完后，才会按顺序执行其他代码。
先看看两个例子：
例子1：
<script>
var
hello =
function
(){
alert(
'hello,zhangsan'
);
}
hello();
//
第一次调用，输出“hello,zhangsan”
var
hello =
function
(){
alert(
'hello,lisi'
);
}
hello();
//
第二次调用，输出“hello,lisi”
<script>
例子2：
1
<script type="text/javascript">
2
function
hello(){
3
4
alert('hello,zhangsan'
);
5
6
}
7
8
hello();
//
第一次调用，输出hello,lisi
9
10
function
hello(){
11
12
alert('hello,lisi'
);
13
14
}
15
16
hello();
//
第二次调用，输出hello,lisi
17
</script>
例子3：
1
<script type="text/javascript">
2
function
hello(){
3
4
alert('hello,zhangsan'
);
5
6
}
7
8
hello();
//
第一次调用，输出hello，zhangsan
9
</script>
10
<script>
11
function
hello(){
12
13
alert('hello,lisi'
);
14
15
}
16
hello();
//第二次调用，输出hello，lisi
17
</script>
在例子2中，两次调用都会输出相同的内容“hello,lisi”。同样是声明两个相同名称的函数，为什么调用的结果却不一样呢？
这 就是JavaScript执行顺序导致的。JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。而且在分析执行同一段 代码中，定义式的函数语句会被提取出来优先执行。函数定义执行完后，才会按顺序执行其他代码。也就是说，在第一次调用hello函数之前，第一个函数语句 定义的代码已经被第二个函数定义语句的代码覆盖了，这就是为什么在例子2中第一次调用hallo时，也会输出后面定义的函数内容的原因了。
而在例子3中，两次调用分别在两个不同的代码段内，所以互不影响。
