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. Jmeter+ant+Jenkins构建接口自动化测试

    1.已写好jmeter脚本 2.安装ant并将ant-jmeter-1.1.1.jar文件放入ant/lib目录,用于调用jmeter 3.修改jmeter的jmeter.properties文件(将 ...

  2. 互联网寒冬，Python 程序员如何准备面试

    虽说年年都在喊互联网寒冬,最难就业季,但是今年确实有点不一样,年前年后一波又一波互联网公司宣布『人员调整,结构优化』, 这是往年没发生过的. 是不是面试机会就少了很多呢?不是的. 搜索招聘网站我们可以 ...

  3. CSAPP lab2 二进制拆弹 binary bombs phase_4

    给出对应于7个阶段的7篇博客 phase_1  https://www.cnblogs.com/wkfvawl/p/10632044.htmlphase_2  https://www.cnblogs. ...

  4. 20135337朱荟潼 Linux第一周学习总结——计算机是如何工作的

    朱荟潼 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课http://mooc.study.163.com/course/USTC-1000029000 1.冯诺依曼体系结 ...

  5. 第二个Sprint冲刺第 八天（燃尽图）

    因为今天停电了,所以我们也休息一天!

  6. 05-java学习-循环结构

    for while do  while 增强for 各种循环嵌套.循环和if的嵌套.switch的嵌套

  7. Mysql设置允许外网访问（图文）

    1.打开mysql.exe(MySQL Command Line Client),输入密码 2.输入:use mysql; 3.查询host输入: select user,host from user ...

  8. grunt入门讲解1：grunt的基本概念和使用

    Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node. ...

  9. [转帖]在VMware ESXi服务器上配置NAT上网 需要学习一下。

    http://blog.51cto.com/boytnt/1292487 在使用VMware workstation的时候,我们经常以NAT的方式配置虚拟机的网络,与桥接方式相比,这样配置可以让虚拟机 ...

  10. 深入 Nginx 之配置篇

     常用配置项 在工作中,我们与 Nginx 打交道更多的是通过其配置文件来进行.那么掌握这些配置项各自的作用就很有必要了. 首先,nginx.conf 的内容通常是这样的: ... ... #核心摸块 ...