Javascript在瀏覽器中的加載順序詳解！

時間 2019-11-18

標籤 javascript 瀏覽器加載順序詳解欄目 JavaScript 简体版

原文原文鏈接

如今前端用javascript用的比較多，固然真心的說這個語言是一個很是業餘的語言，可是用的人不少，因此也比較火。今天想完成一個javascript外部文件自動加載的設計（相似於java或者php的import和require_once)，所以仔細研究了下Javascript的解析順序，發現要真正的實現javascript的動態加載是沒法完美實現的（因此如今全部的js庫都會放在一個js文件裏面，而後讓你在head部分經過src引入）。其實javascript的解析順序很是的簡單，Javascript解析的基本順序原則是：從上到下，同步解析。也就是解析完前一段javascript代碼，纔會繼續解析後面的代碼。若是經過javascript代碼動態加載的代碼部分，這屬於異步解析的，一般會在整個HTML解析完畢以後纔會解析動態加載的部分。（IE10，Chrome29，FireFox34上獲得驗證）。javascript

示例代碼以下：php

 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文件的函數，你的你能說出裏面的代碼執行順序嗎？html

正確的執行順序應該是：前端

 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