js在html中的加载执行顺序

1.加载顺序：引入标记<script />的出现顺序，

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

<script>

    alert("1-第一个执行");

</script>

</head>

<body onload="alert('3-最后执行');">

<script>

    alert("2-第二个执行");

</script>

每个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。
变量的调用，必须是前面已经声明，否则获取的变量值是undefined。

<script type="text/javscrpt">

  alert(str);

  //输出 undefined

  var str= 1;

  alert(str);  //输出 1//

</script>

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

<script type="text/javscrpt">

  aa();            //浏览器报错//

</script>

<script type="text/javscrpt">//

  aa();   //输出 1

  function aa()

  {

    alert(1);

  }

</script

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">//<![CDATA[

  alert(3);    //]]>

</script>

test.js的内容是：

var tmpStr = 1;

alert(tmpStr);

同名ＪＳ函数执行顺序

<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”执行结果：　Ｌast aa

JavaScript执行优先顺序的更多相关文章

  1. JavaScript执行顺序分析

    之前从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序.如果说,JavaScript引擎的工作机制比较深奥 ...

  2. javascript中的defer和async学习+javascript执行顺序

    一.defer和async 我们常用的script标签,有两个和性能.js文件下载执行顺序相关的属性:defer和async defer的含义[摘自https://developer.mozilla. ...

  3. 【THE LAST TIME】彻底吃透 JavaScript 执行机制

    前言 The last time, I have learned [THE LAST TIME]一直是我想写的一个系列,旨在厚积薄发,重温前端. 也是给自己的查缺补漏和技术分享. 欢迎大家多多评论指点 ...

  4. 深入理解JavaScript执行上下文、函数堆栈、提升的概念

    本文内容主要转载自以下两位作者的文章,如有侵权请联系我删除: https://feclub.cn/post/content/ec_ecs_hosting http://blog.csdn.net/hi ...

  5. javascript加载顺序

    javascript加载顺序 <script type="text/javascript" src="jquery.js"></script& ...

  6. 你好，C++（18） 到底要不要买这个西瓜？4.1.6 操作符之间的优先顺序

    4.1.6 操作符之间的优先顺序 在表达一些比较复杂的条件判断时,在同一个表达式中,有时可能会存在多个操作符.比如,我们在判断要不要买某个西瓜时,不仅要判断它的总价(单价8.2元/斤,一共10.3斤) ...

  7. Oracle执行计划顺序

    先从最开头一直往右看,直到看到最右边的并列的地方,对于不并列的,靠右的先执行:对于并列的,靠上的先执行.      即并列的缩进块,从上往下执行,非并列的缩进块,从下往上执行. 如下示例: Execu ...

  8. JavaScript 执行机制

    一.宏任务与微任务 macro-task(宏任务):包括整体代码script,setTimeout,setInterval micro-task(微任务):Promise,process.nextTi ...

  9. 转载---JavaScript执行机制

    很好的一篇文章,原地址 JavaScript执行机制 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不 ...

随机推荐

  1. telnet协议：简介与安装使用

    Telnet简介 Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.它为用户提供了在本地计算机上完成远程主机工作的能力.在终端使用者的电脑上使用teln ...

  2. idou老师教你学Istio 17 : 通过HTTPS进行双向TLS传输

    众所周知,HTTPS是用来解决 HTTP 明文协议的缺陷,在 HTTP 的基础上加入 SSL/TLS 协议,依靠 SSL 证书来验证服务器的身份,为客户端和服务器端之间建立“SSL”通道,确保数据运输 ...

  3. 访问kubernetes ingress-controller

    ingress-controller可以理解为一套反向代理系统,本身需要暴露端口到集群外部,以便客户端访问. 根据实际使用,给出两种暴露端口的方式,如下: 方案一 拓扑 说明 ingress-cont ...

  4. “数学口袋精灵”第二个Sprint计划---第一天

    “数学口袋精灵”第二个Sprint计划----第一天进度 任务分配: 冯美欣:欢迎界面的音效 吴舒婷:游戏界面的动作条,选择答案后的音效 林欢雯:完善算法代码的设计 进度:   冯美欣:上网百度音乐资 ...

  5. Smart Disk -- proposed by Liyuan Liu

    Need 如今,照相渐渐得成为了人们的日常举动.几乎所有的人都在随时随地得照相.手机,相机,平板越来越多的设备对照相进行了支持,同时, 照片以一种前所未有的速度渐渐淹没我们的文件夹.而寻找照片,对照片 ...

  6. Ubuntu读取/root/.profile时发现错误:mesg:ttyname fa

    https://jingyan.baidu.com/article/fb48e8be3743696e632e1450.html gedit /root/.profile mesg n => tt ...

  7. 关于vue-eslint自动补全代码，以及自动生成雪碧图

    一.配置eslint module.exports={ "printWidth": 240, //一行的字符数,如果超过会进行换行,默认为80 "tabWidth&quo ...

  8. PSP（3.13——3.15）以及周记录

    3.13 0:00 4:00 10 230 Cordova插件1,的尝试 N min 10:50 11:30 10 30 英语百词斩 N min 18:00 22:55 20 275 写博客 Y mi ...

  9. SparkException: Master removed our application

    come from https://stackoverflow.com/questions/32245498/sparkexception-master-removed-our-application ...

  10. Spring之配置文件中引入其它配置文件

    <beans> ... <!--引入其它配置文件--> <import resource="classpath:com/helloworld/beans.xml ...