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

示例代码如下：

 <!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

Javascript在浏览器中的加载顺序详解！的更多相关文章

  1. java中带继承类的加载顺序详解及实战

    一.背景: 在面试中,在java基础方面,类的加载顺序经常被问及,很多时候我们是搞不清楚到底类的加载顺序是怎么样的,那么今天我们就来看看带有继承的类的加载顺序到底是怎么一回事?在此记下也方便以后复习巩 ...

  2. （转）面试题--JAVA中静态块、静态变量加载顺序详解

    public class Test { //1.第一步,准备加载类 public static void main(String[] args) { new Test(); //4.第四步,new一个 ...

  3. Spring Boot 配置加载顺序详解

    使用 Spring Boot 会涉及到各种各样的配置,如开发.测试.线上就至少 3 套配置信息了.Spring Boot 可以轻松的帮助我们使用相同的代码就能使开发.测试.线上环境使用不同的配置. 在 ...

  4. servlet与filter的加载顺序详解

     项目:3个filter,3个servlet,匹配的url路径/hello. 情况1:servlet没加<load-on-startup></load-on-startup>情 ...

  5. dubbo配置文件的加载顺序详解（图示）

    Dubbo配置文件的加载顺序 ​ 在使用apache dubbo.version2.7.3 时,配置文件的加载情况.以provider提供服务者为例. 配置文件 ,以下四个配置文件. 其优先级 app ...

  6. web.xml加载顺序详解

    一. 1.启动tomcat启动web项目,首先读取web.xml文件中<context-param>和<listener> 2.容器创建一个ServletContext(ser ...

  7. javascript在html中的加载顺序

    参考:[1]http://coolshell.cn/articles/9749.html(酷壳) [2]http://shaozhuqing.com/?p=2756 [3]http://www.cnb ...

  8. JAVA中静态块、静态变量加载顺序详解

    http://blog.csdn.net/mrzhoug/article/details/51581994 一般顺序:静态块(静态变量)——>成员变量——>构造方法——>静态方法

  9. IE浏览器中的加载项怎么删除

    IE浏览器中的加载项是一些软件或者浏览器的功能控件,我们可以通过禁用.开启来控制是否使用某些加载项,同时可以将一些加载项删除. 比如当我们遇到了一些不好的加载项,想要将它删除,通过这篇经验,教大家怎么 ...

随机推荐

  1. leetcode: 复杂度

    1. single-number Given an array of integers, every element appears twice except for one. Find that s ...

  2. HTC vive VR设备软硬件安装+运行unity开发的VR程序

    总结在HTC vive VR开发过程中的HTC vive的安装调试 1.首先确保电脑的配置满足要求: 进入官网,测试电脑是否满足要求 链接:https://www.vive.com/us/produc ...

  3. DOM笔记（十一）：JavaScript对象的基本认识和创建

    一.什么是对象? 面 向对象(Object-Oriented,OO)的语言有一个标志,那就是都有类的概念,例如C++.Java等:但是ECMAScript没有类的概 念.ECMAScript-262把 ...

  4. ACM Arabella Collegiate Programming Contest 2015 F. Palindrome 并查集

    题目链接:http://codeforces.com/gym/100676/attachments 题意: 给一个字符串,有一些约束条件,两个位置要相同,有一些是问号,求最后有多少种方案回文? 分析: ...

  5. Map的嵌套，HDU(1263)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1263 新学的map的嵌套 #include <stdio.h> #include < ...

  6. 2017.11.4 JavaWeb-----基于JavaBean+JSP求任意两数代数和(改进的在JSP页面中无JSP脚本代码的)+网页计数器JavaBean的设计与使用

    修改后的JSP中不含有JSP脚本代码这使得JSP程序的清晰性.简单 1.设计JavaBean 的Add.java 类 package beans; public class Add { private ...

  7. maven简单了解,没有Maven和使用Maven的区别

    Maven提供了开发人员构建一个完整的生命周期框架.开发团队可以自动完成项目的基础工具建设,Maven使用标准的目录结构和默认构建生命周期.Maven让开发人员的工作更轻松,同时创建报表,检查,构建和 ...

  8. SQL按时间段统计（5分钟统计一次访问量为例,oracle统计）

    需求:统计当天的访问量,每五分钟采集一次 表结构中有日期字段,类型TIMESTAMP 如果,统计是采用每秒/分钟/小时/天/周/月/年,都非常容易实现,只要to_char日期字段然后group by分 ...

  9. C#中this保留字的用法

    一.this保留字 this保留字一般只在构造函数.类的方法和类的实例中使用.它有以下含义: ?在类的构造函数中出现的this,则作为一个值类型,表示对正在构造的对象本身的引用. ?在类的方法中出现的 ...

  10. Oracle SCN与时间的相互转换

    1.SCN转换成时间 select scn_to_timestamp(current_scn) from v$database; 2.时间转换成SCN select timestamp_to_scn( ...