今天作為前端小菜跑去某廠面試，結(jié)果以失敗告終。
記得面試官問我在一個頁面中js的執(zhí)行順序問題，結(jié)果由于自己并沒有研究過，所以不太清楚，糊里糊涂的結(jié)果把自己都說亂了。在網(wǎng)上查了一堆文章之后還是覺得應(yīng)該由自己敲出來測試一下。下面貼一下測試代碼和結(jié)果。
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>標(biāo)簽中第一個內(nèi)置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>標(biāo)簽中第二個內(nèi)置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函數(shù)中的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的內(nèi)容：
1
//
JavaScript Document
2
alert("<head>標(biāo)簽中鏈接過來的a1.js中的代碼。");
下面是a2.js的內(nèi)容：
//
JavaScript Document
alert("<head>標(biāo)簽中鏈接過來的a2.js中的代碼。");
測試結(jié)果（alert的順序）是：js的執(zhí)行順序基本上按照在html中出現(xiàn)的順序，但是也有一些細(xì)小的變化。
1.首先執(zhí)行<head>標(biāo)簽中的js，不論是內(nèi)置還是外鏈形式，都是按照出現(xiàn)的順序執(zhí)行。
2.接著執(zhí)行body中的腳本，按順序直到<html>標(biāo)簽外。
3.然后執(zhí)行defer="defer"的腳本。（IE中測試支持，chrome和firefox都不支持defer屬性，在這兩個瀏覽器中，將作為正常的腳本段按順序執(zhí)行）。
4.最后執(zhí)行body的onload方法b()。
另外：（轉(zhuǎn)自： http://www.cnblogs.com/Jason-Damon/archive/2011/11/12/2246483.html ）
JavaScript執(zhí)行引擎并非一行一行地分析和執(zhí)行程序，而是 一段一段 的分析執(zhí)行的。而且在分析執(zhí)行同一段代碼中， 定義式 的函數(shù)語句會被提取出來優(yōu)先執(zhí)行。函數(shù)定義執(zhí)行完后，才會按順序執(zhí)行其他代碼。
先看看兩個例子：
例子1：
<script>
var
hello =
function
(){
alert(
'hello,zhangsan'
);
}
hello();
//
第一次調(diào)用，輸出“hello,zhangsan”
var
hello =
function
(){
alert(
'hello,lisi'
);
}
hello();
//
第二次調(diào)用，輸出“hello,lisi”
<script>
例子2：
1
<script type="text/javascript">
2
function
hello(){
3
4
alert('hello,zhangsan'
);
5
6
}
7
8
hello();
//
第一次調(diào)用，輸出hello,lisi
9
10
function
hello(){
11
12
alert('hello,lisi'
);
13
14
}
15
16
hello();
//
第二次調(diào)用，輸出hello,lisi
17
</script>
例子3：
1
<script type="text/javascript">
2
function
hello(){
3
4
alert('hello,zhangsan'
);
5
6
}
7
8
hello();
//
第一次調(diào)用，輸出hello，zhangsan
9
</script>
10
<script>
11
function
hello(){
12
13
alert('hello,lisi'
);
14
15
}
16
hello();
//第二次調(diào)用，輸出hello，lisi
17
</script>
在例子2中，兩次調(diào)用都會輸出相同的內(nèi)容“hello,lisi”。同樣是聲明兩個相同名稱的函數(shù)，為什么調(diào)用的結(jié)果卻不一樣呢？
這 就是JavaScript執(zhí)行順序?qū)е碌摹avaScript執(zhí)行引擎并非一行一行地分析和執(zhí)行程序，而是一段一段地分析執(zhí)行的。而且在分析執(zhí)行同一段 代碼中，定義式的函數(shù)語句會被提取出來優(yōu)先執(zhí)行。函數(shù)定義執(zhí)行完后，才會按順序執(zhí)行其他代碼。也就是說，在第一次調(diào)用hello函數(shù)之前，第一個函數(shù)語句 定義的代碼已經(jīng)被第二個函數(shù)定義語句的代碼覆蓋了，這就是為什么在例子2中第一次調(diào)用hallo時，也會輸出后面定義的函數(shù)內(nèi)容的原因了。
而在例子3中，兩次調(diào)用分別在兩個不同的代碼段內(nèi)，所以互不影響。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
