1.加载顺序:引入标记<script />的出现顺序,依次加载

页面上的Javascript代码是HTML文档的一部分,所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序, 
<script />标记里面的或者通过src引入的外部JS,都是按照其语句出现的顺序执行,而且执行过程是文档装载的一部分。

2、每个脚本定义的全局变量和函数,都可以被后面执行的脚本所调用。

  变量的调用,必须是前面已经声明,否则获取的变量值是undefined。

<script type="text/javscrpt">//<![CDATA[
alert(tmp);
//输出 undefined var
tmp = 1;
alert(tmp); //输出 1//]]>
</script>

3.同一段脚本,函数定义可以出现在函数调用的后面,但是如果是分别在两段代码,且函数调用在第一段代码中,则会报函数未定义错误。

<script type="text/javscrpt">//<![CDATA[
aa(); //浏览器报错//]]>
</script>
<script type="text/javscrpt">//<![CDATA[
aa(); //输出 1
function aa()
{
alert(1);
}//]]>
</script>

4、同名JS函数执行顺序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript"> function aa() {
alert('First aa')
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server"> <br />
<input id="Button1" type="button" value="button" onclick="aa();"/>
</form>
</body>
<script type="text/javascript">
function aa(s) {
alert('Second aa');
}
function aa(s) { 被执行
alert('Last aa');
}
</script>
</html>

执行最后面的同名函数 所以结果为 点击“botton”执行结果: Last aa

5.document.write()会把输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,解析完成后
再继续解析HTML文档。

<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"></'+'script>');
document.write('<script type="text/javascript">');
document.write('alert("2");') ;
document.write('alert("我是" + tmpStr);');
document.write('</'+'script>');
</script> <script type="text/javascript">
alert(3);
</script>
test.js文件内容
var tmpStr=2;
alert(tmpStr);

执行顺序 2 2 我是  2  3

6.在js中引入js文件时一定要注意<script></script>的分隔导入,否则会截断主文件的js,主要是后面的</script>结尾标签

document.write("<scr"+"ipt src='my.js'></scr"+"ipt>"); 

document.write('<script type="text/javascript" src="test.js"></'+'script>');

js在html中的加载执行顺序的更多相关文章

  1. MySQL逻辑架构、SQL加载执行顺序、七种JOIN模式图解

    逻辑架构   存储引擎 查看当前安装的mysql提供的存储引擎 查看当前mysql默认的存储引擎 MyISAM和InnoDB SQL加载执行顺序 sql书写顺序 mysql解析器执行的顺序  考点:m ...

  2. js文件加载执行顺序

    转自:http://blog.163.com/water_down/blog/static/170276590201111711243458/ <script type="text/j ...

  3. struts2中配置文件加载的顺序是什么?

    struts2的StrutsPrepareAndExecuteFilter拦截器中对Dispatcher进行了初始化 在Dispatcher类的init方法中定义了配置文件的加载顺序(下面是源码) p ...

  4. Javascript加载执行顺序

    本文主要内容 一.不同位置的script标签执行顺序 二.document.ready和window.onload的区别 一.不同位置的script标签执行顺序 整个加载的过程从解析头部开始,比如ht ...

  5. js的并行加载与顺序执行

    javaScript文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行.在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问 ...

  6. js并行加载,顺序执行

    js并行加载,顺序执行 <script>运行脚本或加载外部文件时,会阻塞页面渲染,阻塞其他资源的加载.如果页面中需要加载多个js文件,在古老浏览器中性能会比较糟糕. 因此有了最原始的优化原 ...

  7. jquery和js的几种页面加载函数的方法以及执行顺序

    参考博客:http://www.cnblogs.com/itslives-com/p/4646790.html    https://www.cnblogs.com/james641/p/783837 ...

  8. Javascript中页面加载完成后优先执行顺序

    Javascript中页面加载完成后优先执行顺序 document优先于windowwindow优先于element //document加载完成执行方法体 document.addEventList ...

  9. 常用js,css文件统一加载方法,并在加载之后调用回调函数

    原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...

随机推荐

  1. 线性代数(矩阵乘法):NOI 2007 生成树计数

    这道题就是深搜矩阵,再快速幂. #include <iostream> #include <cstring> #include <cstdio> #include ...

  2. HDU 5876 Sparse Graph 【补图最短路 BFS】(2016 ACM/ICPC Asia Regional Dalian Online)

    Sparse Graph Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others)To ...

  3. HDU1247 Hat’s Words(Trie的动态内存版本)

    Hat’s Words Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  4. mac下的改装人生——把主硬盘换成ssd

    这两天搞得最多的事情就是我的这两块硬盘,基本上的时间都被他们占用去了,但是最后的结果也是让我很开心--开机瞬秒,程序瞬秒,生活质量瞬间高了很多哈. 关于ssd的各种事情,我的另外一篇博客有讲,算是比较 ...

  5. iOS状态栏颜色

    下面截图给出修改 iOS 状态栏颜色的 4 种方式 Target.png Info.plist.png Storyboard.png code.png 其中第四张图中的代码,直接写在你的任何一个 Vi ...

  6. C#序列化和反序列化

    序列化和反序列化 序列化就是将一个对象的状态(各个属性量)保存起来,然后在适当的时候再获得. 序列化分为两大部分:序列化和反序列化.序列化是这个过程的第一部分,将数据分解成字节流,以便存储在文件中或在 ...

  7. angularJS constant和value

    angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的. 相同点是:都可以接受两个参数,name和value. 区别: 1.co ...

  8. 一个小程序,时间util

    比较时间,如果此时间是今天的显示时间点,今天以前显日期 public String getTime(Date time){               SimpleDateFormat dateFor ...

  9. 山东省赛J题:Contest Print Server

    Description In ACM/ICPC on-site contests ,3 students share 1 computer,so you can print your source c ...

  10. 黑马程序猿_try-catch-finally

    ------- android培训.java培训.期待与您交流! ---------- try-catch-finally中怎样定义语句呢? 1.try块中主要定义可能出现的异常处理语句 2.catc ...