脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-javascript执行顺序，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 今天作为前端小菜跑去某厂面试，结果以失败告终。
记得面试官问我在一个页面中js的执行顺序问题，结果由于自己并没有研究过，所以不太清楚，糊里糊涂的结果把自己都说乱了。在网上查了一堆文章之后还是觉得应该由自己敲出来测试一下。下面贴一下测试代码和结果。
复制代码
2 <html>
3 <head>
4 <;meta charset="utf-8">
6 <script type="text/javascript">
7 alert("<head>标签中第一个内置js代码段，位于链接js的前面。");
8 </script>
9 <script type="text/javascript" src="a1.js"></script>
10 <script type="text/javascript" src="a2.js"></script>
11 <script type="text/javascript">
12 alert("<head>标签中第二个内置js代码段，位于链接js的后面。");
13 </script>
14 </head>
15
16 <body onload="b()">
17 <script defer>
18 alert("defer中的代码段。");
19 </script>
20
21 <script>
22 alert("body 中的 js 代码段。");
23 </script>
24
25 <script>
26 function b(){
27 alert("b函数中的js代码段。");
28 }
29 </script>
30
31 <script>
32 alert("body 中的第二个 js 代码段。");
33 </script>
34
35 </body>
36 <script>
37 alert("body 之外的 js 代码段。");
38 </script>
39 </html>
40 <script>
41 alert("html 之外的 js 代码段。");
42 </script>
复制代码
下面是a1.js的内容：
1 // JavaScript Document
2 alert("<head>标签中链接过来的a1.js中的代码。");
下面是a2.js的内容：
// JavaScript Document
alert("<head>标签中链接过来的a2.js中的代码。");
测试结果（alert的顺序）是：js的执行顺序基本上按照在html中出现的顺序，但是也有一些细小的变化。
1.首先执行<head>标签中的js，不论是内置还是外链形式，都是按照出现的顺序执行。
2.接着执行body中的脚本，按顺序直到<html>标签外。
3.然后执行defer="defer"的脚本。（IE中测试支持，chrome和firefox都不支持defer属性，在这两个浏览器中，将作为正常的脚本段按顺序执行）。
4.最后执行body的onload方法b()。
另外：（转自：https://www.cnblogs.COM/Jason-Damon/Archive/2011/11/12/2246483.html）
JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段的分析执行的。而且在分析执行同一段代码中，定义式的函数语句会被提取出来优先执行。函数定义执行完后，才会按顺序执行其他代码。
先看看两个例子：
例子1：
复制代码
<script>
VAR hello = function(){
alert('hello,zhangsan');
}
hello();//第一次调用，输出“hello,zhangsan”
var hello = function(){
alert('hello,lisi');
}
hello();//第二次调用，输出“hello,lisi”
<script>
复制代码
例子2：
复制代码
1 <script type="text/javascript">
2 function hello(){
3
4 alert('hello,zhangsan');
5
6 }
7
8 hello();//第一次调用，输出hello,lisi
9
10 function hello(){
11
12 alert('hello,lisi');
13
14 }
15
16 hello();//第二次调用，输出hello,lisi
17 </script>
复制代码
例子3：
复制代码
1 <script type="text/javascript">
2 function hello(){
3
4 alert('hello,zhangsan');
5
6 }
7
8 hello();//第一次调用，输出hello，zhangsan
9 </script>
10 <script>
11 function hello(){
12
13 alert('hello,lisi');
14
15 }
16 hello();//第二次调用，输出hello，lisi
17 </script>
复制代码
在例子2中，两次调用都会输出相同的内容“hello,lisi”。同样是声明两个相同名称的函数，为什么调用的结果却不一样呢？
这 就是JavaScript执行顺序导致的。JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。而且在分析执行同一段 代码中，定义式的函数语句会被提取出来优先执行。函数定义执行完后，才会按顺序执行其他代码。也就是说，在第一次调用hello函数之前，第一个函数语句 定义的代码已经被第二个函数定义语句的代码覆盖了，这就是为什么在例子2中第一次调用hallo时，也会输出后面定义的函数内容的原因了。
而在例子3中，两次调用分别在两个不同的代码段内，所以互不影响。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-javascript执行顺序全部内容，希望文章能够帮你解决javascript代码实例教程-javascript执行顺序所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。