摘要: 记得面试官问我在一个页面中js的执行顺序问题,结果由于自己并没有研究过,所以不太清楚,糊里糊涂的结果把自己都说乱了。在网上查了一堆文章之后还是觉得应该由自己敲出来测试一下。下面贴一下测试代码和结果。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 今天作为前端小菜跑去某厂面试,结果以失败告终。

 

记得面试官问我在一个页面中js的执行顺序问题,结果由于自己并没有研究过,所以不太清楚,糊里糊涂的结果把自己都说乱了。在网上查了一堆文章之后还是觉得应该由自己敲出来测试一下。下面贴一下测试代码和结果。

 

复制代码

 1 <!doctype html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8">

 5 <title>test js</title>

 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脚本,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_7649.html