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>



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

Copy code

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



2.如果网速度比较慢或而外部JS文件又比较大,则上述代码中的 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/p/3057218.html