JavaScript加载次序问题

 3个文件，一个index.html如下

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>js加载顺序</title>
 6     </head>
 7     <body>
 8         显示内容不
 9         <script src="a1.js" type="text/javascript"></script>
10         <script src="a2.js" type="text/javascript"></script>
11     </body>
12 </html>
View Code

 

a1.js如下

1 // a1.js
2 /*
3 这里粘贴一本小说，目的让该文件变大，使得下载较慢。
4 */
5 var a = 111;
6 var b = 222;
View Code

 

a2.js如下

1 // a2.js
2 var c = a+b;
3 alert(c);
4 alert('ddd');
View Code

 

我将a1.js做到20m那么大，在谷歌浏览器下，测试，发现，a1不下载完，a2也就不执行。原来担忧，a1过大，没下载完，而a2已下载完成，a2中要用到a1中的变量怎么办，现在明白了，如果a1没下载完成，那么a2是不会执行的。

同样，将html变成如下

<script src="a1.js" type="text/javascript"></script>
<script src="a2.js" type="text/javascript"></script>
这里显示内容

会发现，如果a1.js没有下载完成的话，浏览器里是不会显示

“

这里显示内容

”

的，也在按顺序等待~~和图片不是一回事，图片不会等待上面个先显示再显示下面的。而js会等待后再执行。

posted @ 2018-10-04 10:55  html55  阅读(268)  评论(0)    收藏  举报