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

时间:2022-05-13 06:20:40

现在前端用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

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&period;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. 一步步实现ABAP后台导入EXCEL到数据库【2】

    前文:http://www.cnblogs.com/hhelibeb/p/5912330.html 既然后台作业只能在应用服务器运行,那么,我们可以先将要上传的数据保存在应用服务器中,之后再以后台作业 ...

  2. javascript中比较数字大小

    做项目,遇到一个让人非常纠结的问题,就是获取的两个值比较,却出现了一位数比二位数大的情况.刚开始还以为哪里写错了,检查了几遍,用ie调了下,意识到是应该是用错了比较方法了.才想起以前也碰到过这种情况的 ...

  3. Fury观后感

    刚看完,淋雨汽车回来的,电影很精彩.前期略慢热(我还去了躺厕所),军人的黑色幽默,冷酷的军旅生活作为基调.内容我就不ao述了,新兵蛋诺曼的经历是这部电影的为主线(也有人说诺曼是观众的代入点,准确来说他 ...

  4. 去除scons构建动态库的前缀lib

    如何使用scons构建工程,请参考快速构建C++项目工具Scons,结合Editplus搭建开发环境. 编译SharedLibrary项目的时候,生产的so文件时自动加上lib, 例如: env = ...

  5. &lbrack;转载自阿里丁奇&rsqb;各版本MySQL并行复制的实现及优缺点

    MySQL并行复制已经是老生常谈,笔者从2010年开始就着手处理线上这个问题,刚开始两三年也乐此不疲分享,现在再提这个话题本来是难免"炒冷饭"嫌疑.    最近触发再谈这个话题,是 ...

  6. Python中的classmethod与staticmethod

    首先,这是一个经典的问题. 我们首先做一个比较: classmethod的第一个参数是cls,即调用的时候要把类传入 这意味着我们我们可以在classmethod里使用类的属性,而不是类的实例的属性( ...

  7. Spring AOP就是这么简单啦

    前言 只有光头才能变强 上一篇已经讲解了Spring IOC知识点一网打尽!,这篇主要是讲解Spring的AOP模块~ 之前我已经写过一篇关于AOP的文章了,那篇把比较重要的知识点都讲解过了一篇啦:S ...

  8. 201771010118 马昕璐《面向对象程序设计java》第十周学习总结

    第一部分:理论知识学习部分 泛型:也称参数化类型(parameterized type)就是在定义类.接口和方法时,通过类型参数 指示将要处理的对象类型. 泛型程序设计(Generic program ...

  9. 实现kylin定时跑当天的任务

    说明: 每天自动构建cube,动态在superset里面查看每天曲线变化图 #! /bin/bash ##cubeName cube的名称 ##endTime 执行build cube的结束时间 (命 ...

  10. 『Numpy』常用方法记录

    numpy教程 防止输出省略号 import numpy as np np.set_printoptions(threshold=np.inf) 广播机制 numpy计算函数返回默认是一维行向量: i ...