JS的裝載和執(zhí)行
首先，瀏覽器對JS的運(yùn)行分兩個(gè)特性：
1）載入后馬上執(zhí)行；
2）執(zhí)行后會阻塞后面的內(nèi)容（包括頁面的渲染、其他資源的下載等）
所以，有多個(gè)js文件要載入的時(shí)候，瀏覽器默認(rèn)是同步下載，即按順序一個(gè)一個(gè)下載下來，并依次執(zhí)行。
當(dāng)此時(shí)，要操作DOM結(jié)點(diǎn)的時(shí)候，由于HTML被阻塞，DOM樹還沒生成，故此時(shí)如果引用document.getElementById這些操作時(shí)，會報(bào)找不到的錯(cuò)誤。舉例：
-
在head中引入的時(shí)候，頁面加載出來了，但會報(bào)錯(cuò)，alert也沒有出現(xiàn)：
test.html
執(zhí)行結(jié)果 - 調(diào)整script標(biāo)簽的順序，到body標(biāo)簽后：
認(rèn)識DOMContentLoaded和load
先觸發(fā)DOMContentLoaded事件，后觸發(fā)load事件。
DOM文檔加載的步驟為：
解析HTML結(jié)構(gòu)。
加載外部腳本和樣式表文件。
解析并執(zhí)行腳本代碼。
DOM樹構(gòu)建完成。//DOMContentLoaded
加載圖片等外部文件。
頁面加載完畢。//load
在第4步，會觸發(fā)DOMContentLoaded事件。在第6步，觸發(fā)load事件。
defer和async
defer：IE上用的，會把腳本異步裝載，并且等到DOM裝載完畢（DOMContentLoaded）。多個(gè)defer的<script>也會按照其出現(xiàn)的順序執(zhí)行。
async：H5新的屬性。也會異步加載js腳本，但嚴(yán)格遵循“載入后立馬執(zhí)行”的特性，無法保證執(zhí)行順序和時(shí)機(jī)。
所以這兩種都不會阻塞HTML的加載。
舉例：
-
加入async（或者defer）后，頁面渲染不阻塞，腳本也順利執(zhí)行了（div中的文本123被獲取出來了）。
test.html
執(zhí)行結(jié)果
此外，還可以通過創(chuàng)建script，插入到DOM中，加載完畢后callBack來異步加載。
網(wǎng)上這篇帖子寫的不錯(cuò)，可以參考一下：http://www.360doc.com/content/13/0620/12/1332348_294249608.shtml
