現在前端用javascript用的比較多，當然真心的說這個語言是一個非常業余的語言，但是用的人很多，所以也比較火。今天想完成一個javascript外部文件自動加載的設計（類似於java或者php的import和require_once)，因此仔細研究了下Javascript的解析順序，發現要真正的實現javascript的動態加載是無法完美實現的（所以現在所有的js庫都會放在一個js文件里面，然后讓你在head部分通過src引入）。其實javascript的解析順序非常的簡單，Javascript解析的基本順序原則是：從上到下，同步解析。也就是解析完前一段javascript代碼，才會繼續解析后面的代碼。如果通過javascript代碼動態加載的代碼部分，這屬於異步解析的，通常會在整個HTML解析完畢之后才會解析動態加載的部分。（IE10，Chrome29，FireFox34上得到驗證）。
示例代碼如下：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <script>window.console.log("html befor...");</script> 4 <html xmlns="http://www.w3.org/1999/xhtml"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <script src='myjs/autoload.js'></script> 8 <title>New Web Project</title> 9 </head> 10 <script>window.console.log("head after...");</script> 11 <script src='myjs/autoload.js'></script> 12 <body> 13 <script src='myjs/HelloDate.js'></script> 14 <script src='myjs/Student.js'></script> 15 <script> 16 LoadScriptEnd("myjs/HelloDate.js", loadend); 17 LoadScriptEnd("myjs/Student.js",loadend2); 18 function loadend() 19 { 20 var obj = new HelloDate(); 21 document.getElementsByTagName("h2")[0].innerHTML = obj.GetDateStr(); 22 23 } 24 25 function loadend2() 26 { 27 var stu=new Student("1001","jackwong","man"); 28 document.getElementsByTagName("h3")[0].innerHTML=stu.DispInfo(); 29 30 } 31 32 33 </script> 34 35 <h1>New Web Project Page</h1> 36 <h2>this is end!</h2> 37 <h3>this is end2!</h3> 38 39 <script>window.console.log("body script end");</script> 40 </body> 41 42 <script>for(var i=0;i<100000000;i++)m++;</script> 43 <script>window.console.log("body after...");</script> 44 </html> 45 <script>window.console.log("html after...");</script>
以上代碼里面LoadScriptEnd函數是動態加載外部 js文件的函數，你的你能說出里面的代碼執行順序嗎？
正確的執行順序應該是：
1 "html befor..." Jstest.html:3 2 "autoload begin" autoload.js:1 3 "autoload end" autoload.js:62 4 "head after..." Jstest.html:10 5 "autoload begin" autoload.js:1 6 "autoload end" autoload.js:62 7 "HelloDate begin" HelloDate.js:1 8 "HelloDate end" HelloDate.js:17 9 "Student begin" Student.js:1 10 "Student end" Student.js:13 11 "LoadScriptEnd begin" autoload.js:33 12 "LoadScriptEnd Return" autoload.js:60 13 "LoadScriptEnd begin" autoload.js:33 14 "LoadScriptEnd Return" autoload.js:60 15 "body script end" Jstest.html:40 16 "body after..." Jstest.html:44 17 "html after..." Jstest.html:46 18 "Student begin" Student.js:1 19 "Student end" Student.js:13 20 "LoadScriptEnd OK" autoload.js:55 21 "HelloDate begin" HelloDate.js:1 22 "HelloDate end" HelloDate.js:17 23 "LoadScriptEnd OK" autoload.js:55