JS的执行顺序

最新推荐文章于 2023-11-14 16:19:40 发布
转载 最新推荐文章于 2023-11-14 16:19:40 发布 · 125 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
原文链接：http://www.cnblogs.com/houweijian/archive/2013/05/03/3057218.html
标签
#javascript #ViewUI
本文深入解析JavaScript在HTML文档中的执行顺序，包括head与body区script的执行时机、变量与函数的定义顺序、外部JS文件的加载及执行条件，以及body的onload事件触发机制。通过具体示例，帮助读者理解不同场景下JS代码的运行规律。

一、head区的script会优先于body区的script执行

Copy code
<html>
<head>
<title> 实例：Head区script代先于body区的script执行 </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="枫岩,CNLEI" />
<meta name="copyright" content="cnlei.y.l@gmail.com, http://www.cnlei.com" />
<script type="text/javascript">
<!--
alert("这是head区里的script执行结果");
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
alert("这是body区里的script执行");
//-->
</script>
</body>
</html>



二、关于变量，与书写的顺序有关，必须先声明才可引用：
<script type="text/javascript">
alert(UserName); //因UserName未定义,提示: undefined
var UserName = "helloyzl";
alert(UserName); //提示: "helloyzl"
</script>

三、关于函数的定义与执行：
1.如果函数的定义与函数的执行，是位于同一Script标签内，则函数的执行与二者位置顺序无关,即以下两则代码都能正常执行：
>> 函数定义一：

Copy code
<script type="text/javascript">
<!--
function A(){
    alert("A()");
}
A();
//-->
</script>


>> 函数定义二：

Copy code
<script type="text/javascript">
<!--
B();
function B(){
    alert("B()");
}
//-->
</script>


2.如是函数的定义与函数执行是分别位于不同的script标签，则要求函数的定义所在script必需先于函数执行所在script标签，类似JS变量:
>> 正确书写方式：

Copy code
<script type="text/javascript">
<!--
function C(){
    alert("C()");
}
//-->
</script>
<script type="text/javascript">
<!--
C();
//-->
</script>


>> 错误书写方式：

Copy code
<script type="text/javascript">
<!--
D(); //出错，浏览器尚未解释到函数 D 的定义所在script标签
//-->
</script>
<script type="text/javascript">
<!--
function D(){
    alert("D()");
}
//-->
</script>



四、关于引用外部ＪＳ文件：
1.当网速度比较快，外部ＪＳ文件比较小时，以下代码中的 MyFunction 会正常执行：

Copy code

<script type="text/javascript" src="abc.js"></script>
<script type="text/javascript">
<!--
MyFunction(); //注: MyFunction是定义在外部JS文件abc.js内
//-->
</script>



2.如果网速度比较慢或而外部ＪＳ文件又比较大，则上述代码中的 MyFunction 有可能执行会出错：
>> 浏 览器在解释到<script type="text/javascript" src="abc.js"></script>时，会发出一个http请求加载外部的文件，如果加载过程中出现异常（如：文件过大、网 速度过慢、文件不存在等等），则会直接忽略掉当前外部文件的加载，进而去解释下一对HTML标签

3.同理，下面的书写顺序也是错误的：

Copy code
<script type="text/javascript">
<!--
MyFunction(); //注: MyFunction是定义在外部JS文件abc.js内，但引用abc.js的script标签尚解释到，因些无法执行
//-->
</script>
<script type="text/javascript" src="abc.js"></script>



五、关于body的onload事件和body内部script代码的执行
>> 位于body内部的代码会先于onload事件中的代码执行，测试代码：

Copy code


<html>
<head>
<title> 实例：body的onload事件与body区内部script的执行顺序 </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="author" content="枫岩,CNLEI" />
<meta name="copyright" content="cnlei.y.l@gmail.com, http://www.cnlei.com" />
<script type="text/javascript">
<!--
function onloadForBody(){
    alert("这是body的onload事件触发后执行的结果");
}
//-->
</script>
</head>
<body onload="onloadForBody();">
<script type="text/javascript">
<!--
alert("这是body区里的script执行结果");
//-->
</script>
</body>
</html>

转载于:https://www.cnblogs.com/houweijian/archive/2013/05/03/3057218.html

anwei9164
关注
js中的事件执行顺序梳理
WANG944282的博客
04-18 8486
js的事件执行顺序梳理
JavaScript--代码执行顺序
wjbltxx的专栏
03-14 1626
第一个微任务执行完毕，开始执行第二个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务process.nextTick，输出2，4，3，5；开始执行第三个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务，输出9,11,10,12。3、宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，所以会最后执行。此时，主代码块执行完毕，即第一个宏任务执行完毕，开始执行微任务，输出 6，8；1、微任务是在宏任务的执行中产生的，所以一开始程序执行时是没有微任务的。
JS执行顺序
前端小白
03-27 325
事件循环机制，宏任务与微任务
js代码执行顺序简单介绍,详细说明js的执行过程
阿发狗伪原创
11-14 676
第一个微任务执行完毕，开始执行第二个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务process.nextTick，输出2，4，3，5；开始执行第三个宏任务setTimeout，遵循先执行主线程宏任务，再执行微任务，输出9,11,10,12。3、宏任务里如果有宏任务，不会执行里面的那个宏任务，而是被丢进任务队列后面，所以会最后执行。此时，主代码块执行完毕，即第一个宏任务执行完毕，开始执行微任务，输出 6，8；1、微任务是在宏任务的执行中产生的，所以一开始程序执行时是没有微任务的。
理解JS的事件循环机制(Event Loop)
铁锤妹妹的博客
05-15 7306
JS是单线程语言，但是又可以做到异步处理高并发请求，这时就用到了JavaScript的事件循环机制。
JavaScript:全面解析各种浏览器网页中的JS代码的执行顺序
LENEL的砖篮
10-08 7490
        近来我通过一些测试以全面的解析网页在各种浏览器中的JavaScript代码的执行顺序，在这儿做个记录。        我们知道javaScript是一种解释型语言，他的执行是自上而下，但是各个浏览器对于至上而下的理解是有细微差别的，而代码的上下游也就是程序流又对于程序正确至关重要，所以我觉得有必要深入理解多个js块儿的执行顺序。首先得知道有多少方法能把javaScript加入到
js等待异步执行完再执行_JavaScript 中优雅使用顺序执行异步函数
热门推荐
weixin_39851261的博客
12-03 2万+
火于异步1995年，当时最流行的浏览器——网景中开始运行 JavaScript （最初称为 LiveScript）。 1996年，微软发布了 JScript 兼容 JavaScript。随着网景、微软竞争而不断的技术更新，在 2000年前后，JavaScript 相关的技术基础准备就绪。 随后到 2005 年前后，以 Google 为首开始重视使用 AJAX（即 Asynchronous Java...
js在页面上执行的顺序
小乙先生的博客
07-09 4051
一、js是单线程执行的 二、js是顺序执行的 三、代码： 1、index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
javaScript js代码执行顺序和键盘捕捉
OVO_LQ_Start的博客
02-28 227
js代码执行顺序 js代码在浏览器打开的时候就开始自上而下依次执行，所以可能发生js代码已经执行，而标签未执行，js代码获取不到标签。 所以我们应该让js代码在所有东西加载完毕的时候执行。 注意：只要是标签中的属性，我们都可以用.来使用。 <body> <script type="text/javascript"> window.onload = function...
html页面中js执行的顺序 (即javaScript的执行顺序)
zwn_software的博客
03-17 561
页面中js的执行顺序：在页面的head标签中添加一段js代码，在页面的尾部也就是&lt;/body&gt;之前添加一段代码，然后在body的onload事件中引用一个函数，此三者的执行顺序如何? 下面是测试的代码: &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &...
js执行顺序
he182181的博客
10-14 1873
js执行顺序
JS阶段总结
qq_59359040的博客
08-11 627
JS最初是由网景公司创建的，参考了JAVA语言，主要是用来做前端校验的，后来被ECMA组织更名为ECMAScript（ES）。
javascript --- > 优先级&&执行顺序
栗子好好吃的博客
06-01 1313
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
描述一下脚本＜script＞放在＜head＞和放到＜body＞底部的区别
欣欣酱博客
02-20 3260
------- 放<head>中的情况：脚本会优先加载，但加载过程中，<body>还没加载完，会使脚本访问不到<body>中的元素。 放<body>底部：脚本在<body>加载后加载，能够保证脚本有效地访问<body>的元素。 ------- html渲染执行的顺序为从上到下的一个执行顺序，首先第一步执行head中的内容，如果有外联样式，则下载外联样式，如果有script标签，那么浏览器的渲染引擎则停止，交给JavaScript引
JS的解析与执行过程
小鱼的博客
10-23 409
1.全局预处理阶段  : 1.1：处理函数声明有冲突  会覆盖 1.2：处理变量声明时有冲突，会忽略 这两句话下面的列题做了解释 Document //预处理阶段 alert(fn); //这里拿到的是第二个函数 alert(a); //a是undefined alert(b); //b会直接报错 b=6； function fn()
JavaScript执行顺序总结
qq_41872385的博客
03-11 5455
js的执行顺序
js执行的顺序
星辰一地的专栏
07-09 992
在使用easyui的时候，被js的执行顺序搞懵了，仔细调了一下，原理还没有搞太懂，但是执行的顺序大体弄懂了。 示例代码： function main () { var  a1 =  " ";     var a2 = " ";   if ( a ( a1, a2 ) ) { b( b1, b2 ); } } function  a ( args0, args1 ) { /
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值