今天作為前端小菜跑去某廠面試，結果以失敗告終。
記得面試官問我在一個頁面中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中，兩次調用分別在兩個不同的代碼段內，所以互不影響。
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
