- 題目：
放在HTML里的哪一部分JavaScripts會在頁面加載的時候被執(zhí)行侯嘀？
A. 文件頭部位置
B. 文件尾
C .<head>標簽部分
D .<body>標簽部分
想要知道js文件在html中的加載解析執(zhí)行情況？首先必須要先清晰了解——DOM文檔加載步驟
DOM文檔加載步驟：
- 解析html結(jié)構(gòu)；
- 加載外部腳本和樣式表文件碟嘴；
- 解析并執(zhí)行腳本；
- dom樹構(gòu)建完成（觸發(fā)DOMContentLoaded和 jquery ready事件）错沃；
- 加載圖片等外部文件；（會觸發(fā)圖片load事件）
- 頁面加載完畢玉掸。（觸發(fā)load事件）
注意：凡是沒有綁定加載事件(如：window.onload醒叁、$(document).ready())的js文件中的代碼把沼，在本文件（代碼）加載完成后立即解析執(zhí)行。
js可以由于內(nèi)外部饮睬、是否由綁定加載事件（如：load捆愁、ready）觸發(fā)執(zhí)行、在html文檔中的位置昼丑，分為多種情況矾克。而且執(zhí)行運行情況又不一樣。所以有必要了解酒繁。
不同類js代碼解析運行區(qū)別：
栗子
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//1.外部引入js文件outer1.js
<script src="js/outer1.js"></script>
//2.內(nèi)部head標簽內(nèi)代碼段
<script type="text/javascript">
console.log("(head無綁定加載事件) " + document.getElementById("image") + ", run at：" + (new Date().getTime() - startTime));
</script>
</head>
<body>
<img src="http://pic1.win4000.com/wallpaper/4/5546eae50c041.jpg"
id="image" alt="落日原圖">
//3.外部引入js文件outer2.js
<script src="js/outer2.js"></script>
//4.綁定window.onload的內(nèi)部代碼
<script type=text/javascript>
window.onload = function () {
console.log("window.load! run at：" + (new Date().getTime() - startTime));
}
</script>
//5.內(nèi)部body標簽內(nèi)代碼段
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOMContentLoaded：DOM fully loaded and parsed州袒， run at ：" + (new Date().getTime() - startTime));
});
console.log("inner js(body無綁定加載事件), run at：" + (new Date().getTime() - startTime));
console.log("(inner body無綁定加載事件)" + document.getElementById("image") + " run at：" + (new Date().getTime() - startTime));
document.getElementById("image").onload = function () {
console.log("img loaded (body綁定圖片加載事件), loaded at：" + (new Date().getTime() - startTime));
}
</script>
</body>
</html>
- outer1.js
//outer1.js
//引入位置：head中
var startTime = new Date().getTime(); //為后面記錄代碼開始執(zhí)行時間提供標準
console.log("outer1 js (head)! run at(ms)：" + (new Date().getTime() - startTime));
- outer2.js
//outer2.js
//引入位置： body后
console.log("outer2 js (body)! run at：" + (new Date().getTime() - startTime));
- 運行結(jié)果
- 分析：
首先郎哭，每個語句后面時間以ms為單位菇存。此時間是依鸥，以outer1.js中var startTime = new Date().getTime();語句執(zhí)行時作為0時刻（起始時間）來區(qū)別其他js輸出語句執(zhí)行時間。
然后姐扮，特地選較大的圖片，更明顯看出
再次茶敏，通過控制臺查看各文件加載情況：好像除了index.html頁面最先加載之外，其他外部css贮乳、js文件的隨機加載解析胀屿，并沒有一定順序。取決于進入加載隊列的時間亲铡。
上述js代碼無綁定加載事件時奖蔓，本人猜測是在步驟4才執(zhí)行讹堤，因為DOM TREE構(gòu)建完成，理由在下面例子中js語句1504257209(1).jpgconsole.log(document.getElementById("image"))和console.log("DOMContentLoaded：DOM fully loaded and parsed....)兩者打印時間判斷疑务，但是又覺得不大合理梗醇。求大神告知，為何DOMContentLoaded反而后執(zhí)行温鸽？
小結(jié)：
題目有誤手负，除非特地指明“頁面加載的時候”指的僅僅是加載body部分（但我覺得這個理解不OK）。不然的話蝠猬，head里面的js代碼段只要沒綁定了load统捶、ready等事件敦姻，在DOM文檔加載過程中都會加載歧杏、解析犬绒、執(zhí)行兑凿。如上例，不管是head（代碼段1,2）礼华，還是body（代碼段3,5）圣絮；不管是外部還是內(nèi)部，一樣會執(zhí)行捧请。
分享三篇相關(guān)文章：
jQuery $(document).ready()和JavaScript onload事件
DOMContentLoaded
jQuery DOM Ready
