Javascript在浏览器中的加载顺序详解！

时间：2023-07-15 08:13:44

现在前端用javascript用的比较多，当然真心的说这个语言是一个非常业余的语言，但是用的人很多，所以也比较火。今天想完成一个javascript外部文件自动加载的设计（类似于java或者php的import和require_once)，因此仔细研究了下Javascript的解析顺序，发现要真正的实现javascript的动态加载是无法完美实现的（所以现在所有的js库都会放在一个js文件里面，然后让你在head部分通过src引入）。其实javascript的解析顺序非常的简单，Javascript解析的基本顺序原则是：从上到下，同步解析。也就是解析完前一段javascript代码，才会继续解析后面的代码。如果通过javascript代码动态加载的代码部分，这属于异步解析的，通常会在整个HTML解析完毕之后才会解析动态加载的部分。（IE10，Chrome29，FireFox34上得到验证）。

Javascript在浏览器中的加载顺序详解！

示例代码如下：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

 "http://www.w3.org/TR/html4/loose.dtd">

 <script>window.console.log("html befor...");</script>

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

         <script src='myjs/autoload.js'></script>

         <title>New Web Project</title>

     </head>

     <script>window.console.log("head after...");</script>

     <script src='myjs/autoload.js'></script>

     <body>

         <script src='myjs/HelloDate.js'></script>

         <script src='myjs/Student.js'></script>

         <script>

             LoadScriptEnd("myjs/HelloDate.js", loadend);

             LoadScriptEnd("myjs/Student.js",loadend2);

             function loadend()

             {

                 var obj = new HelloDate();

                 document.getElementsByTagName("h2")[0].innerHTML = obj.GetDateStr();

             }

             function loadend2()

             {

                 var stu=new Student("1001","jackwong","man");

                 document.getElementsByTagName("h3")[0].innerHTML=stu.DispInfo();

             }

         </script>        

         <h1>New Web Project Page</h1>

         <h2>this is end!</h2>

         <h3>this is end2!</h3>

         <script>window.console.log("body script end");</script>

     </body>

     <script>for(var i=0;i<100000000;i++)m++;</script>

     <script>window.console.log("body after...");</script>

 </html>

 <script>window.console.log("html after...");</script>

以上代码里面LoadScriptEnd函数是动态加载外部 js文件的函数，你的你能说出里面的代码执行顺序吗？

正确的执行顺序应该是：

 "html befor..." Jstest.html:3

 "autoload begin" autoload.js:1

 "autoload end" autoload.js:62

 "head after..." Jstest.html:10

 "autoload begin" autoload.js:1

 "autoload end" autoload.js:62

 "HelloDate begin" HelloDate.js:1

 "HelloDate end" HelloDate.js:17

 "Student begin" Student.js:1

 "Student end" Student.js:13

 "LoadScriptEnd begin" autoload.js:33

 "LoadScriptEnd Return" autoload.js:60

 "LoadScriptEnd begin" autoload.js:33

 "LoadScriptEnd Return" autoload.js:60

 "body script end" Jstest.html:40

 "body after..." Jstest.html:44

 "html after..." Jstest.html:46

 "Student begin" Student.js:1

 "Student end" Student.js:13

 "LoadScriptEnd OK" autoload.js:55

 "HelloDate begin" HelloDate.js:1

 "HelloDate end" HelloDate.js:17

 "LoadScriptEnd OK" autoload.js:55

相关文章